Question

您好我正在使用一个也使用占位符文本的简单表单。我使用JQuery而不是html属性实现此行为，主要是因为占位符输入还向用户显示错误消息，需要使用与普通占位符文本不同的样式。

现在表单的行为就像这样。

单击输入会隐藏占位符输入并将焦点设置在主输入字段上。
如果用户输入了数据，则占位符不会显示。

现在一切都很好，但是当用户按下TAB键来改变焦点时，上述情况都不会发生。

以下是相关的JQuery代码和HTML：

＆＃13;

$("#plh_username").click(function(){
	$(this).hide();
	$("#username").focus();
});

$('body').click(function(e){
	var target = $(e.target);

	if(!target.is('#plh_username')) {
		if ( $("#username").val() == "" ){
			$("#plh_username").show();
		}
	}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />

＆＃13;

当用户选择输入字段而不实际点击输入字段时，如何实现相同的效果？

Answer 1

您可以尝试使用.focus()和.focusout()代替.click()。

＆＃13;

$("#plh_username").focus(function(){
    $(this).hide();
    $("#username").focus();
});

$('#username').focusout(function(){
    if ($(this).val() === ""){
        $("#plh_username").show();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
<input value="Press tab or shift+tab" />

＆＃13;

来自documentation：

的引用

焦点元素通常以某种方式突出显示浏览器，例如围绕元素的虚线。该 focus用于确定首先接收哪个元素键盘相关事件。

Answer 2

不要使用.click()。使用.focus()。

Answer 3

我认为你正在寻找onfocus活动。当控件获得焦点时会触发此事件。

$("#plh_username").focus( function(){
  alert("focus")
});

例如，请参阅http://jsfiddle.net/wb2vef0g/

Jquery切换点击和焦点上的输入可见性

3 个答案: