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