Javascript Jquery在单击并聚焦时切换输入可见性

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

现在表单的行为是这样的

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

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

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

$（“#plh_用户名”）。单击（函数（）{
$（this.hide（）；
$（“#用户名”）.focus（）；
});
$（'body'）。单击（函数（e）{
var目标=$（e.target）；
如果（！target.is（'#plh_username'））{
如果（$（“#用户名”）.val（）=“”）{
$（“plh#u用户名”）.show（）；
}
}
});

您可以尝试使用and而不是
。单击（）


$（“#plh_用户名”）.focus（函数（）{
$（this.hide（）；
$（“#用户名”）.focus（）；
});
$（'#username'）.focusout（函数（）{
if（$（this）.val（）=“”）{
$（“plh#u用户名”）.show（）；
}
});

您可以尝试使用and而不是
。单击（）


$（“#plh_用户名”）.focus（函数（）{
$（this.hide（）；
$（“#用户名”）.focus（）；
});
$（'#username'）.focusout（函数（）{
if（$（this）.val（）=“”）{
$（“plh#u用户名”）.show（）；
}
});
不要使用
。单击（）。使用。
不要使用
。单击（）。使用。
我想您正在寻找onfocus事件。当控件获得焦点时触发此事件

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

例如，请参见
我认为您正在寻找onfocus事件。当控件获得焦点时触发此事件

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

例如，请参见
Shashank，谢谢您的提示。我已切换到.focus（）。现在所做的是永久隐藏占位符。按TAB键时，所有占位符都会一个接一个地消失。如果实际用户输入的值为空字符串，则它们应在focusout（）上重新出现。使用focus（）隐藏（）和使用focusout（）显示（）元素是一个问题。它们相互抵消，占位符无论如何都挂在那里。@user3494543我用一个工作片段编辑了我的答案。基本上在
$（'#username'）上。focusout（）
检查该值，查看其是否为空，是否再次显示占位符。我添加了第三个输入，这样您就可以轻松地按tab键和shift+tab键分别关闭和打开焦点。点击同样有效。Shashank，谢谢你的提示。我已切换到.focus（）。现在所做的是永久隐藏占位符。按TAB键时，所有占位符都会一个接一个地消失。如果实际用户输入的值为空字符串，则它们应在focusout（）上重新出现。使用focus（）隐藏（）和使用focusout（）显示（）元素是一个问题。它们相互抵消，占位符无论如何都挂在那里。@user3494543我用一个工作片段编辑了我的答案。基本上在
$（'#username'）上。focusout（）
检查该值，查看其是否为空，是否再次显示占位符。我添加了第三个输入，这样您就可以轻松地按tab键和shift+tab键分别关闭和打开焦点。点击也可以。