Vijay's Blog on .Net

• Tweet

• Tweet

Watermark is a common feature required in many web applications. Watermarks prompt the user to enter relevant text into a textbox. Watermark text is usually greyed. When you click on the textbox, the watermark disappears. This post explains how to implement Watermarks in Asp.net using jQuery. Below is a picture of how a watermark looks like:

Textbox has an attribute called title. The title of the textbox can be something like “Please enter your name”. This usually appears as a tooltip in many browsers. When there is no text in the textbox, the title of the textbox can be used as the watermark text. When the user clicks on the textbox with the watermark text, the watermark text can be replaced with a blank text. The watermark feature is implemented using a few lines of javascript. Below is a code snippet of how this can be implemented using jQuery:

            $('.watermark').each(
                function () {

                    // on focus, remove the watermark
                    $(this).focus(
                        function () {
                            if ($(this).val() == $(this).attr('title')) {
                                $(this).val('');
                                $(this).removeClass('defaultText');
                            }
                        });

                    // on blur, if text is empty, put the watermark
                    $(this).blur(
                        function () {
                            if ($(this).val() == '') {
                                $(this).val($(this).attr('title'));
                                $(this).addClass('defaultText');
                            }
                        });

                    // this ensures that watermark is on!
                    $(this).blur();
                });
            // end of watermark

The above code picks all textboxes with class=watermark and watermarks it. The HTML markup for the textbox will look like below. The ToolTip attribute of the Textbox appears as the watermark text. The CssClass is “watermark”. The name of the class can be anything. It merely serves as a selector for picking up the textboxes to be watermarked.

<div>
    <asp:TextBox ID="txtFirst" ToolTip="Please enter first name" CssClass="watermark" runat="server"></asp:TextBox>
</div>
<div>
    <asp:TextBox ID="txtLast" ToolTip="Please enter last name" CssClass="watermark" runat="server"></asp:TextBox>
</div>

There is one more thing to do. The text within the textbox should be greyed out. The javascript adds the class=”defaultText” to the textbox. This style should be defined in the stylesheet. Sample css is shown below:

.defaultText
{
    font-style: italic;
    color: #bbb;
}

There is one detail that has to be taken care of. When the user submits the form (click submit button), we have to check whether the text within the textbox is the watermark text. If so, we have to make the textbox empty. This ensures that the server-side code receives a blank text (instead of the watermark text). This is slightly trickier than you think.

An event handler should be written to clear the watermark text before the form is posted. It is easy to assume that $(‘form’).submit(event_handler); will take care of clearing the watermark text. But, in classic Asp.net, each hyperlink can do a postback using the javascript function: __doPostback(). The __doPostback() function looks like the code below:

var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

The __doPostback() function does not trigger the jQuery submit event handler for forms. So, $(‘form’).submit(event_handler); will not work (I am not sure if it is by design. Or it is a bug in jQuery). So, we are left to use the onsubmit event of the form to clear the watermark. The code for this looks like:

document.forms[0].onsubmit =
        function () {

            $('.watermark').each(
                function () {
                    if ($(this).val() == $(this).attr('title'))
                        $(this).val('');
                });
        };

The final step to writing a simple plugin is to implement a watermark() function and a clearWatermark() function. The watermark function() implements the watermark feature. The clearWatermark() function removes the watermark before the user clicks the Save button. The code for the simple jQuery plugin is below:

(function ($) {

    $.fn.watermark = function () {

        // on focus, remove the watermark
        return this.each(
            function () {

                $(this).focus(
                    function () {
                        if ($(this).val() == $(this).attr('title')) {
                            $(this).val('');
                            $(this).removeClass('defaultText');
                        }
                    });

                // on blur, if text is empty, put the watermark
                $(this).blur(
                        function () {
                            if ($(this).val() == '') {
                                $(this).val($(this).attr('title'));
                                $(this).addClass('defaultText');
                            }
                        });

                // this ensures that watermark is on!
                $(this).blur();
            });
    };
    // end of watermark function
    // onsubmit of a form should be handled
    // this should remove the watermark
    $.fn.clearWatermark = function () {

        return this.each(
                function () {
                    if ($(this).val() == $(this).attr('title'))
                        $(this).val('');
                });

    };

    // end of plugin
})(jQuery);

Using the plugin is very simple:

$(document).ready(
    function () {
        // Put watermarks on textboxes
        $('.watermark').watermark();

        document.forms[0].onsubmit = function () {
            // Clear watermarks before submit
            $('.watermark').clearWatermark();
        };
    });

The above plugin is fully functional. It meets a lot of jQuery plugin authoring standards. A few things should be done to ensure that it follows all standards:

• The css style – defaultText is hardcoded. The plugin should allow the developer to specify a css style.
• clearWatermark() function should be implemented within the watermark() plugin. It should be invoked using $(‘selector’).watermark(‘clear’);

I will leave the user of this plugin to do the standardization. If anyone uses this plugin, please leave a comment.