带水印输入(css& Jquery) [英] Input with Watermark (css & Jquery)
本文介绍了带水印输入(css& Jquery)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
$(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;
}
我想修复的是,每当水印处于输入文字的颜色应为灰色(#a8a8a8
)。当值为用户写的东西时,颜色应为黑。
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.
这是小提琴: http://jsfiddle.net/qGvAf/
推荐答案
$(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");
}
});
});
});
这篇关于带水印输入(css& Jquery)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文