JavaScript
$(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;
}
To improve this code, I want to ensure that when the watermark text is in the input field, the text color should be gray (#a8a8a8). When the user enters their own text, the color should shift to black.
This code snippet can also be found on this fiddle: http://jsfiddle.net/qGvAf/