JQuery: Creating a Text Watermark

Update: Read about my JQuery plugin which handles inputs, textareas, and even passwords! It is super easy to implement and very lightweight.

My post on creating a text watermark with javascript has been pretty popular. One comment had to do with being able to implement that watermark without being able to edit the HTML (only having access to CSS and Javascript). The easy solution to that is using JQuery. So as a follow up to that post, I wrote a quick tutorial on a text watermark using JQuery instead of plain old Javascript. Here is an example in action:


To do this, you’ll need the following code:

The HTML:

<input id="inputTextboxId" type="text" />

The Javascript:

$(document).ready(function() {
 var watermark = 'textbox watermark text';
 $('#inputTextboxId').blur(function(){
  if ($(this).val().length == 0)
    $(this).val(watermark).addClass('watermark');
 }).focus(function(){
  if ($(this).val() == watermark)
    $(this).val('').removeClass('watermark');
 }).val(watermark).addClass('watermark');
});

This javascript binds an event to both the blur and focus events of the input field. When the field gains focus (someone clicks in), the JS checks to see if the value of the input field is equivalent to the watermark, in which case it will clear it. When the field loses focus (someone clicks out), the JS checks to see if the field is empty, and if it is, places the watermark back in. The javascript also sets the default value of the textbox to the watermark so that you don’t have to edit the HTML at all. All of the “addClass” and “removeClass” events are only necessary if you wish to style the watermark differently than regular text input. To use this, you’ll need some CSS too.

Lastly, the CSS if you are feeling fancy:

input.watermark { color: #999; }

That’s it! A simple text watermark using JQuery that doesn’t require touching HTML at all.

10 Responses to “JQuery: Creating a Text Watermark”

  1. Ben G says:

    This is super simple and easy to follow. MANY THANKS!

  2. Balaji says:

    awesome thanks!!!

  3. Kevin says:

    Great! However the default copy passes through my validator, how can I have it be ignored as user value.

    KW

    • David says:

      Hey Keven. Best solution I can think of for validation is on the button click event for your submission, check the value of that field against the default watermark text, and if it is the same, then erase it. That way, when a user clicks the button, if they left that field untouched, your JS will erase it, and thus trigger a validation failure. Your code should look something like this:

      $(‘#buttonID’).click(function(){
         if ($(‘input#fieldID’).val() == ‘watermarkText’)
            $(‘input#fieldID’).val(”);
      });

  4. Brent says:

    nice – thank you.
    2 comments:
    blur & focus have been depreciated in favor of .on(“blur”,function(){…)
    why not make this a jQuery extension in your code:
    (function ($) {
    $.fn.watermark = function (watermark) {
    this.on(“blur”, function () {
    if (!$(this).val().length)
    $(this).val(watermark).addClass(‘watermark’);
    }).on(“focus”, function () {
    if ($(this).val() == watermark)
    $(this).val(”).removeClass(‘watermark’);
    }).val(watermark).addClass(‘watermark’);
    return this;
    }
    } (jQuery));
    and then call $(“#nameInput”).watermark(“Enter Your Name…”)

    • David says:

      Thanks for the thoughts Brent. I actually have made a plugin out of it, which I just put up a week or so ago. As for the deprecation of blur and focus, I am not doubting you, but I also haven’t seen that anywhere, including on the JQuery website. Blur and focus were created as shortcuts in the first place, so I don’t know why they’d deprecate them in favor of what they were meant to replace originally. Anyway, thanks for the thoughts, and I hope you enjoyed the code.

  5. sandeep says:

    thanks a lot !!! great work

  6. Brad says:

    This is so simple! It works great. Thanks!

  7. Eric says:

    Nice One thanks David! 😀

  8. zeal says:

    its great
    nice work
    thanks