这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
其他回答
用纯CSS,它为我工作。使它在输入/聚焦时透明
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: transparent !important;
}
input:focus::-moz-placeholder { /* Firefox 19+ */
color: transparent !important;
}
input:focus:-ms-input-placeholder { /* IE 10+ */
color: transparent !important;
}
input:focus:-moz-placeholder { /* Firefox 18- */
color: transparent !important;
}
/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }
输入
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
对于文本区域
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
编辑: 现在所有浏览器都支持
输入:重点::占位符{ 颜色:透明; } <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+ */
为了进一步细化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中可以看到一个工作示例。