这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
其他回答
这是一个css的解决方案(目前,只适用于WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}
Toni的答案很好,但我宁愿放弃ID并显式使用输入,这样所有带有占位符的输入都能获得行为:
<input type="text" placeholder="your text" />
注意$(function(){});$(document).ready(function(){})的简写:
$(function(){
$('input').data('holder',$('input').attr('placeholder'));
$('input').focusin(function(){
$(this).attr('placeholder','');
});
$('input').focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
})
演示。
演示在这里:jsfiddle
试试这个:
//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
function(){
$(this).data('holder',$(this).attr('placeholder'));
$(this).focusin(function(){
$(this).attr('placeholder','');
});
$(this).focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
});
}
任何版本的Angular
只需将其添加到.css文件中
.hide_placeholder:focus::placeholder {
color: transparent;
}
在课堂上使用
<input class="hide_placeholder"
HTML:
<input type="text" name="name" placeholder="enter your text" id="myInput" />
jQuery:
$('#myInput').focus(function(){
$(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
$(this).attr('placeholder','enter your text');
});