Input with Watermark (css & Jquery)

Question

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;
}

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.

This is the fiddle: http://jsfiddle.net/qGvAf/

Answer 1

Your desired behaviour of "Input with Watermark" has already been done - it's called the placeholder attribute. It works in modern browsers.

For older browsers, you should use a jQuery plugin to emulate placeholder for you.

Lastly, to set the colour, you need CSS similar to this:

.placeholder {
    color: #a8a8a8;
}
::-webkit-input-placeholder {
    color: #a8a8a8;
}
:-moz-placeholder {
    color: #a8a8a8;
}

Unfortunately, you can't combine the above rules; it won't work.