带水印的输入（css & Jquery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7433589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input with Watermark (css & Jquery)
提问by OrangeJuice
JS
JS
$(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');
});
});
});
HTML
HTML
<label>Name: </label>
<input class="input" type="text" name="name" maxlength="" data-watermark="My Name" />
CSS
CSS
.input{
width:190px;
height:16px;
padding-top:2px;
padding-left:6px;
color:#000;
font-size: 0.688em;
border:#8c9cad 1px solid;
}
What I would like to fix is that whenever the watermarks is in value of the input that the color of the text should be grey(#a8a8a8). And when the value is something the user writes, then the color should be black.
我想修复的是，每当水印处于输入值时，文本颜色应为灰色( #a8a8a8)。当值是用户写的东西时，颜色应该是black。
This is the fiddle: http://jsfiddle.net/qGvAf/
这是小提琴：http: //jsfiddle.net/qGvAf/
采纳答案by KORAY ATALAY
$(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");
}
});
});
});
回答by thirtydot
Your desired behaviour of "Input with Watermark" has already been done - it's called the placeholderattribute. It works in modern browsers.
您想要的“带水印输入”行为已经完成 - 它被称为placeholder属性。它适用于现代浏览器。
For older browsers, you should use a jQuery pluginto emulate placeholderfor you.
对于较旧的浏览器，您应该使用jQuery 插件来模拟placeholder。
Lastly, to set the colour, you need CSS similar to this:
最后，要设置颜色，您需要类似于以下的 CSS：
.placeholder {
color: #a8a8a8;
}
::-webkit-input-placeholder {
color: #a8a8a8;
}
:-moz-placeholder {
color: #a8a8a8;
}
Unfortunately, you can't combine the above rules; it won't work.
不幸的是，你不能结合上述规则；它不会工作。
回答by Dinand
Don't override existing value's
不要覆盖现有值
I'll had a small problem with this nice solution, but with a little change solved, like to share it.
这个不错的解决方案我会遇到一个小问题，但是解决了一些小问题，想分享一下。
Just add the ifstatement on line 3 to prevent override loaded value's.
只需if在第 3 行添加语句即可防止覆盖加载的值。
$(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
}
})
});
Hope it's useful.
希望它有用。
