If you guys haven’t seen this terrific jQuery Watermark Plugin go check it out over here.
I just installed it today and found a nice way to watermark all my input boxes by a neat jQuery .each() trick. If you’ve used this plugin but got a bit annoyed having to invoke the watermark and set the contents in JavaScript for each one, give this a shot.
JavaScript:
// Scan and set a watermark for every matching input element and set with 'watermark' flag
$(document).ready(function() {
$('input').each(function() {
$(this).watermark($(this).attr('watermark'));
});
});
Html:
<input type="text" id="name" watermark="Full Name" /> <input type="text" id="city" watermark="City or Suburb" />
The JS will iterate through all input controls on your page (the above example being two), and set the watermark text to that which you have specified in a custom attribute named “watermark”. Pretty easy and cuts down code.
Great plugin, cheers Todd.
3 Comments
Neat trick but I think you’d be better setting the watermark as the ‘title’ attribute and reading from that rather than adding a new attribute which will invalidate your html.
Good point. Although you have to deal with a tooltip on every textbox if you are running FF and/or Chrome? But better than invalid html I suppose.
Hey Graham, thanks for the props, glad you’re enjoying the plugin. I do check the issue list somewhat regularly, so feel free to leave anything you like over there.
Post a Comment