Rewriting the TextBoxWatermarkExtender as an ASP.NET AJAX Plugin
Step 1: Find an existing jQuery watermark plugin in that does what I want
Here the script is in all of its glory ...
To do this I setup my majax.watermark Component to handle the Sys.Application.load event. When this event fires I grab all of the elements that have the watermark class applied to them and apply the watermark logic to them as follows:
- If the element doesn't currently have a value, set the value to the title attribute and add the watermark CSS class to the element
- When the focus event for the element fires check to see if the value is the same as the title. If it is remove the watermark text and as well as the watermark CSS class
- When the blur event fires check to see if the value is empty. If it is reapply the title value and add the watermark CSS class back
Step 3: Add the Script References to your Page
After the watermark plugin component is written all we have to do to use it is let the ScriptManager know about it like so ...
And of course make sure the scripts have been saved to the appropriate file paths on the web server ...
And finally, just set the ToolTip and CssClass attributes for all of the ASP.NET TextBox controls that should have the watermark applied to them ...
Step 4: Enjoy!
Well I am pretty much sold on this as a potential plugin pattern for getting some of the jQuery goodness into ASP.NET AJAX. What about you?
That's it. Enjoy!