JQuery Plugin: Simple Textbox Watermark

In a previous post, I’ve written about creating a simple JQuery watermark. The code I wrote in that post is simple, and breaks down how a watermark really works. I expanded on that simplicity with this plugin, but not too far. Most watermark plugins I’ve seen are overly complex, attempting to account for all usage scenarios, when a majority of people only need to handle a small subset of those scenarios. So, I built a light plugin (under 1.3KB) that handles those basic scenarios well and implements easily. Here’s how it works:

Here’s how to implement it:

  1. Add in the most recent version of JQuery and the plugin code.
  2. In a document ready function, bind the plugin to any inputs and textareas you want with a single line of JQuery.
  3. Add the watermark text you want into the title property of the appropriate inputs and textareas.
  4. Apply any CSS you want to style your watermark text (suggested), and that’s it!
  5. Dependent on your usage scenario, call the function to clear out the watermarks before submitting the form.

The javascript:

$(document).ready(function(){
     $('.watermark').watermark();
});

The plugin applies a class of ‘marked’ to inputs and textareas when the watermark is active:

input.watermark, textarea.watermark { color: #000; }
input.marked, textarea.marked { color: #999; }

You’ve got to include your title property and the watermark class for the plugin to bind to the form item:

<input type="text" title="WATERMARK_TEXT class="watermark" />
<input type="text" title="WATERMARK TEXT" class="watermark" val="PREPOPULATED_VALUE" />
<input type="password" title="WATERMARK_TEXT" class="watermark" />
<input type="email" title="WATERMARK_TEXT" class="watermark" />
<textarea title="WATERMARK_TEXT" class="watermark"></textarea>

Here’s the javascript function to call if you want to clear out the watermarks before a form submission (just make sure to use the same JQuery targeting you used to bind the plugin to your form elements so you don’t miss anything):

$('.watermark').watermark('clearWatermarks');

It is as simple as that. Did I sell you on it? If so, download the plugin and enjoy! Here are links to both the unminimified and minified versions.

Download Full (1.66KB)Download Minified (1.26KB)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

If you have any questions or comments on the plugin, please share. I may release more versions if there are specific feature requests that can be implemented without using a heavy amount of code. I want to keep this light, so if you want really advanced features, then this isn’t the plugin for you. But who knows, maybe I’ll write a more advanced one later…

8 Responses to “JQuery Plugin: Simple Textbox Watermark”

  1. Yianni says:

    This plugin works wonders for a newbie like me, thank you. But I have a question:
    I’ve used this on address fields on an order form. The user now has the option to search for an address using an external script, which will auto-fill the fields. The fields are now ‘marked’ but they keep the css as though they are a ‘watermark’. Is there a way to force it to change to black (marked) text?

    Thanks again,
    YG

    • David says:

      Thanks! The plugin was written to be very light and doesn’t really account for edge cases like you are referring to. You can try rebinding the plugin to your textboxes which might work.

  2. Andrew says:

    Very interesting, thanks David? –
    what license did you release it under (if any)?

    Would you consider licensing it in such a way that I/and other users can use it within their own applications?

    Thanks

    • David says:

      It isn’t released under any official license. I would appreciate attribution if you choose to use it publicly, which you may absolutely do.

  3. Soder says:

    Works like a charm, thanks alot!

  4. lisa says:

    the watermark does not show up for type=email fields. how do you get it to work for fields like that?

    • David says:

      Thanks for pointing this out Lisa. Sorry it took me so long to respond though. I’ve gone ahead and updated the plugin to handle email fields. The plugin is built to handle password fields differently than other fields. It had been looking for just inputs of type text or textareas. I simply added support for type email as well. Thanks for bringing this to my attention.

  5. Ravinder says:

    Works like a charm! Thanks for sharing this.