Question

我发现在现代浏览器中，我可以使用此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技巧？

Answer 1

<强> 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;
}

JS

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');  
});

Answer 2

您可以在一秒钟后将占位符设置为空字符串。

HTML：

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

JS：

var tempPlaceholder;
var eraserTimeout;

$('.removePlaceholder').focus(function() {
    var element = $(this);
    tempPlaceholder = element.attr('placeholder');
    eraserTimeout = setTimeout(function() {
        element.attr('placeholder', '');
    }, 1000);
}).blur(function() {
    clearTimeout(eraserTimeout);
    $(this).attr('placeholder', tempPlaceholder);
});

您可以在jsfiddle查看。

Answer 3

如果您只关心Webkit，可以使用它（来自CSS Tricks）：

[placeholder]:focus::-webkit-input-placeholder {
    transition: opacity 1s 0.5s ease; 
    opacity: 0;
}

以上等待1秒，然后进行CSS转换，超过0.5秒逐渐消失。

要添加Firefox支持，这可能有效（尚未对其进行测试）：

[placeholder]:focus::-webkit-input-placeholder, [placeholder]:focus::-moz-placeholder {
    transition: opacity 1s 0.5s ease; 
    opacity: 0;
}

我不确定IE是否可行。

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

3 个答案: