Blog
jQuery: Sticking to Commitments
By Don Kiely | October 22, 2012
Microsoft made two commitments when it decided to embrace jQuery as its one and only client-side JavaScript library. First, they were going to replace their Ajax Library with jQuery in every appropriate ASP.NET Web technology, including both Web Forms and MVC applications. Second, they would contribute plugins and other extensions to the jQuery Library, primarily by adapting their work on enhancements for the Ajax Library to the jQuery Library. These contributions might end up in the core jQuery Library, as official jQuery extensions, or, as a last resort, freely distributed, open source extensions. We discuss one such extension, watermarking, below.
Watermarking
Watermarking is a cool, useful, and interactive way to prompt a user for the information that should go into a text box on a form. When the input element is empty, the watermark text appears, usually grayed out. When the user enters the field, the watermark text disappears and whatever the user types appears in the field. You can determine the styling of the watermarked element both when the watermark text appears and when the user text appears.
The Ajax Control Toolkit has a nice TextBoxWatermark extender that you can attach to a server-side ASP.NET TextBox control. Figure 1 shows the TextBoxWatermark demo from the ACT sample pages.
Figure 1. The ACT TextBoxWatermark demo.
There are many watermark jQuery plugins, but one of the simplest and easiest to use is the TinyWatermark jQuery plugin. You can use it with any input or text area element by specifying the watermark CSS class and the text you want to display when the input element is empty. You have the option of supplying the watermark text either as the value of the title attribute of the element or as the second argument to the watermark method. When the user submits the form, the plugin removes the watermark text. The jquery.tinywatermark- 3.1.0.js plugin file is a mere 623 bytes, and that's not even minified or compressed.
Figure 2 shows watermarking in the sample page. The user has moved to the first text box and entered text, so the watermark text is removed and the text box has its default appearance. The other two text boxes show the watermark text and styling.
Figure 2. Watermarking in action in the sample page.
The following HTML creates the three text boxes on this part of the page. Notice that the first two text boxes have a title attribute with the watermark text, while the third will have the text set programmatically. The first two are assigned the watermarked class as the means to identify them to the plugin that they are to have watermarked text inserted. The last one is assigned to the watermarkedAlt class to let the code treat it differently, as you'll see in a moment.
<h3>Watermarking</h3><input type="text" size="30" class="watermarked"title="Enter your name here" /><br /><input type="text" size="30" class="watermarked"title="Enter your email address here" /><br /><input type="text" size="60" class="watermarkedAlt" /> The plugin uses the following CSS style to change the appearance of the elements that are watermarked. It merely sets the background color to #FFFF99, which is officially Pale Canary Yellow, and changes the font color to a medium gray.
.watermark{background-color: #FFFF99;color: #909090;}The crux of the watermarking code is the following two statements, contained within the jQuery ready method so they'll fire only after the page's DOM is loaded in memory. The first statement watermarks the name and email text boxes on the page, using the title attribute's value as the watermark text. The second statement watermarks the third text box, providing the watermark text as the second argument to the method. Both statements tell the watermark method to use the watermark CSS style to display the input element and watermark text.
$('.watermarked').watermark('watermark');$('.watermarkedAlt').watermark('watermark','Enter your Social Security and bank account numberhere');We usually find that the first form of the watermark statement, using the title attribute for the watermark text, to be more useful and practical when there are more than a couple of elements on the page you want to watermark. That way the watermark text is with the element rather than separated in the page's script code. But you're free to use whatever form works best for you.
You can use whatever class name you want to identify the input elements to be watermarked, as well as the name of the CSS style used to format the elements with watermark text. The plugin is surprisingly functional for such a small size!
