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

Hide input field placeholder (textbox watermark) on focus after one second

本文关键字：焦点 一秒钟 字段 输入 占位符 文本 隐藏      更新时间：2023-09-26

我发现，在现代浏览器中，我可以隐藏输入的占位符文本(文本框水印)通过使用这个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技巧吗?

jsFIddle Demo

我建议使用占位符css和类名。然后在focus/blur的元素上切换类名。

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

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

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

如果你只关心Webkit，你可以使用这个(来自CSS技巧):

[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中是否可行。

相关文章：