javascript - Jquery 在点击和聚焦时切换输入可见性

Question

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

现在表单的行为是这样的。

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

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

这里是相关的 JQuery 代码和 HTML:

$("#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();
		}
	}
});

<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="" />

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

Answer 1

您可以尝试使用 .focus()和 .focusout()而不是 .click()。

$("#plh_username").focus(function(){
    $(this).hide();
    $("#username").focus();
});

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

<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" />

引自documentation :

Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.