这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
试试这个函数:
+它隐藏占位符在焦点上,并返回它在模糊
+这个函数依赖于占位符选择器,首先它选择具有占位符属性的元素,触发一个聚焦函数,另一个模糊函数。
重点:它向元素添加了一个属性“data-text”,该属性从占位符属性中获取其值,然后它删除了占位符属性的值。
在模糊:它返回占位符值,并从数据文本属性中删除它
<input type="text" placeholder="Username" />
$('[placeholder]').focus(function() {
$(this).attr('data-text', $(this).attr('placeholder'));
$(this).attr('placeholder', '');
}).blur(function() {
$(this).attr('placeholder', $(this).attr('data-text'));
$(this).attr('data-text', '');
});
});
如果您通过检查输入元素来了解幕后发生的事情,您就可以很好地理解我的意思
其他回答
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
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');
});
对于一个纯基于CSS的解决方案:
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
注意: 尚未被所有浏览器供应商支持。
参考:Ilia Raiskin用CSS隐藏焦点上的占位符文本。
除此之外,我有两个想法。
您可以添加一个模仿palceholder的元素。然后使用javascript控制元素的显示和隐藏。
但它太复杂了,另一个是用兄弟的css选择器。就像这样:
.占位符{位置:绝对;字体大小:14 px;左:40像素;上图:11 px;行高:1;pointer-events:没有;} .send消息输入:焦点+ .占位符{显示:无;}
23333,我的英语很差。希望能解决你的问题。
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />