这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
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'));
});
})
演示。
其他回答
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
除此之外,我有两个想法。
您可以添加一个模仿palceholder的元素。然后使用javascript控制元素的显示和隐藏。
但它太复杂了,另一个是用兄弟的css选择器。就像这样:
.占位符{位置:绝对;字体大小:14 px;左:40像素;上图:11 px;行高:1;pointer-events:没有;} .send消息输入:焦点+ .占位符{显示:无;}
23333,我的英语很差。希望能解决你的问题。
任何版本的Angular
只需将其添加到.css文件中
.hide_placeholder:focus::placeholder {
color: transparent;
}
在课堂上使用
<input class="hide_placeholder"
$("input[placeholder]").each(function () {
$(this).attr("data-placeholder", this.placeholder);
$(this).bind("focus", function () {
this.placeholder = '';
});
$(this).bind("blur", function () {
this.placeholder = $(this).attr("data-placeholder");
});
});
这是一个css的解决方案(目前,只适用于WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}