聚焦输入框后一秒钟隐藏输入框占位符（文本框水印）。

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技巧可供使用？

- user3634621

---

这被称为占位符。为什么你要叫它水印？ - Lee Taylor

我认为它也被称为水印文本。 - user3634621

Firefox 的选择器是 [placeholder]:focus::-moz-placeholder。 - Oriol

Answer 1

JSFiddle示例

我建议使用带有类名的占位符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');  
});

- Travis J

---

@LynHeadley - 现在怎么样？ - Travis J

看起来比我的酷多了 :) - Uxonith

@TravisJ：是的，但现在没有像Chrome那样的缓入/缓出。 - Vickel

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 查看它。

- Uxonith

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是否可以实现这一点。

- Michael Bednarek