带水印的输入（CSS和Jquery）

  • Z时代
  • 2024-01-10
  • 分类：问答

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

<label>Name: </label>
<input class="input" type="text" name="name" maxlength="" data-watermark="My Name" />

CSS

.input{
    width:190px;
    height:16px;
    padding-top:2px;
    padding-left:6px;
    color:#000;
    font-size: 0.688em;
    border:#8c9cad 1px solid;
}

我要解决的问题是，只要水印达到输入值，文本的颜色应为 （#a8a8a8）。当值是用户编写的值时，则颜色应为 。

回答：

$(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） 的全部内容， 来源链接： utcz.com/qa/403098.html

回到顶部