这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
编辑: 现在所有浏览器都支持
输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">
Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
其他回答
不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。
例如,在下面的邮箱中,点击里面的占位符文字会消失,点击外面的文字会重新出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
为了进一步细化Wallace Sidhrée的代码示例:
$(function()
{
$('input').focusin(function()
{
input = $(this);
input.data('place-holder-text', input.attr('placeholder'))
input.attr('placeholder', '');
});
$('input').focusout(function()
{
input = $(this);
input.attr('placeholder', input.data('place-holder-text'));
});
})
这确保每个输入在data属性中存储正确的占位符文本。
在jsFiddle中可以看到一个工作示例。
编辑: 现在所有浏览器都支持
输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">
Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
试试这个函数:
+它隐藏占位符在焦点上,并返回它在模糊
+这个函数依赖于占位符选择器,首先它选择具有占位符属性的元素,触发一个聚焦函数,另一个模糊函数。
重点:它向元素添加了一个属性“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', '');
});
});
如果您通过检查输入元素来了解幕后发生的事情,您就可以很好地理解我的意思
下面这段CSS对我来说很有用:
input:focus::-webkit-input-placeholder {
color:transparent;
}