一秒钟后将输入字段占位符（文本框水印）隐藏在焦点上

用户名

我发现，使用现代浏览器，可以使用以下CSS隐藏输入的占位符文本（文本框水印）：

[placeholder]:focus::-webkit-input-placeholder {
  opacity: 0;
}

<input id="txt_first_name" type="text" placeholder="Enter Your First Name">
<input id="txt_last_name" type="text" placeholder="Enter Your Last Name">

它的工作原理。我的问题是，如何在1000毫秒后以动画方式将文本隐藏在焦点上？是否有任何jquery / javascript技巧？

特拉维斯J

jsFIddle Demo

我建议将占位符css与类名一起使用。然后在焦点/模糊上切换元素名称的开和关。

的CSS

.hideHolder[placeholder]:focus::-webkit-input-placeholder{
  opacity: 0;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;
}

/*moz support*/
.hideHolder[placeholder]:focus::-moz-placeholder{
 opacity: 0;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

var hideHolder = 0;
$('input[placeholder]').focus(function(){
 clearTimeout(hideHolder);
 var me = this;
 hideHolder = setTimeout(function(){
  $(me).addClass('hideHolder');       
 },1000);    
}).blur(function(){
 clearTimeout(hideHolder);
 $(this).removeClass('hideHolder');  
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。