当用户单击时,我可以使用 CSS 更改输入字段值吗?
喜欢:
<input type=text name=username>
<input type=password name=password>
因此,当用户单击此字段时,文本将消失,他将能够写一些东西。
我努力了:
input[value="Input desired username here"] {
styles...
}
有什么线索吗?
没有必要为此使用 css。您可以为输入标签使用占位符属性,它将在输入框中显示默认值:
<input type="text" name="username" placeholder="Username" />
请注意,placeholder
并非所有浏览器都支持该属性,如果您想让它跨浏览器,您可以编写一个 javascript 代码在您的输入框中放置一个默认值,或者使用这个简单而快速的修复:
<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />
这称为占位符。现代浏览器将允许您使用这样的占位符属性:
<input type="text" name="username" placeholder="Input desired username here" />
它会如你所愿出现。然后,您将需要利用 Modernizr 将该功能反向移植到旧版浏览器。像这样的 JavaScript 会有所帮助:
$(document).ready(function () {
if(!Modernizr.input.placeholder) {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
})