$(document).ready(function () {
$(":input[data-watermark]").each(function () {
$(this).val($(this).attr("data-watermark"));
$(this).bind('focus', function () {
if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
});
$(this).bind('blur', function () {
if ($(this).val() == '') $(this).val($(this).attr("data-watermark"));
$(this).css('color','#a8a8a8');
});
});
});
<label>Name: </label>
<input class="input" type="text" name="name" maxlength="" data-watermark="My Name" />
.input{
width:190px;
height:16px;
padding-top:2px;
padding-left:6px;
color:#000;
font-size: 0.688em;
border:#8c9cad 1px solid;
}
我想解决的问题是,只要水印的输入值为文本颜色灰色(#a8a8a8
)。当值是用户写的东西时,颜色应该是黑色。
答案 0 :(得分:23)
您已经完成了“带水印输入”的所需行为 - 它被称为placeholder
attribute。它works in modern browsers。
对于旧版浏览器,您应该使用jQuery plugin为您模拟placeholder
。
最后,要设置颜色,您需要类似于此的CSS:
.placeholder {
color: #a8a8a8;
}
::-webkit-input-placeholder {
color: #a8a8a8;
}
:-moz-placeholder {
color: #a8a8a8;
}
不幸的是,你无法结合上述规则; it won't work
答案 1 :(得分:8)
$(document).ready(function () {
$(":input[data-watermark]").each(function () {
$(this).val($(this).attr("data-watermark"));
$(this).css("color","#a8a8a8");
$(this).bind("focus", function () {
if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
$(this).css("color","#000000");
});
$(this).bind("blur", function () {
if ($(this).val() == '')
{
$(this).val($(this).attr("data-watermark"));
$(this).css("color","#a8a8a8");
}
else
{
$(this).css("color","#000000");
}
});
});
});
答案 2 :(得分:1)
不要覆盖现有值
对于这个不错的解决方案我会遇到一个小问题,但是解决了一些变化,比如分享它。
只需在第3行添加if
语句,以防止覆盖加载值。
$(document).ready(function () {
$('.watermark').each(function () {
// add the line below
if (this.value == '') {
$(this).val($(this).attr("data-watermark"));
$(this).css("color", "#a8a8a8");
$(this).bind("focus", function () {
if ($(this).val() == $(this).attr("data-watermark"))
$(this).val('');
$(this).css("color", "#000000");
});
$(this).bind("blur", function () {
if ($(this).val() == '') {
$(this).val($(this).attr("data-watermark"));
$(this).css("color", "#a8a8a8");
}
else {
$(this).css("color", "#000000");
}
});
// Don't forget the closing bracket
}
})
});
希望它有用。