Posts Tagged ‘watermarks’

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…

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.

Javascript: Creating a Text Watermark

Update: Read about the JQuery version of this text watermark or better yet, check out my lightweight JQuery plugin which handles inputs, textareas, and even passwords!

This post is in response to a request to see how to create a textbox watermark using only text instead of an image. In a previous post, I explained how to use an image for a textbox watermark. Textbox watermarks are fantastic tools you can use to improve the usability of a website, as they give the user guidance on what to enter into the textbox. If you don’t want to use an image as my other post describes, here is how to create a simple watermark using javascript. Before we begin though, see exactly what you are making:


So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function watermark(inputId,text){
  var inputBox = document.getElementById(inputId);
    if (inputBox.value.length > 0){
      if (inputBox.value == text)
        inputBox.value = '';
    }
    else
      inputBox.value = text;
}

This javascript function checks if the textbox text isn’t empty, and then determines whether to clear the text or not. It also will put the watermark text back in if the user deletes what they entered or doesn’t enter anything. The function needs to be called in both the onblur and onfocus events of the textbox, which is explained below.

Here is the HTML that goes with the JS:

<input id="inputTextboxId" type="text" value="type here" onfocus="watermark('inputTextboxId','type here');" onblur="watermark('inputTextboxId','type here');" />

That’s all you need! And if you have any questions, don’t hesitate to ask! A question on my image watermark post lead to this post, so you never know!

Javascript: Creating an Image Watermark

Well, this is my last javascript post for a bit, seeing as this is just an offshoot of my last post Javascript: Dynamically Altering CSS Properties. In this post, we’ll go over creating a simple Javascript watermark for a textbox using an image. If you are curious how to create a watermark with just text, read my other post on how to create a textbox text watermark. A textbox watermark can help encourage its use and reduce confusion for your users. I typically employ a watermark for textboxes that exist outside of a form (they only gather one piece of needed information such as a zip code as opposed to an entire address).

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function hideWatermark(theID)
{
    var element = document.getElementById(theID);
    element.style.backgroundImage = 'none';
    element.style.backgroundColor = 'white';
}
function showWatermark(theID)
{
    var element = document.getElementById(theID);
    if (element.value.length == 0)
        element.style.backgroundImage = 'url(\'IMAGE_LOCATION_HERE\')';
    else
        element.style.backgroundColor = 'white';
}

On focus (when the user clicks on the textbox) the hideWatermark function is called. The javascript takes in a string of the textbox ID. It then sets the background image to none, and the background color to white. On blur (when the user clicks away from the textbox, putting focus on any other element), the showWatermark function is called. This javascript also takes in the same ID. It then checks to see if the content of the textbox is empty, if it is, it puts the background image of the watermark back in. If it is not empty, then it keeps the background color as white.

Here is the HTML that goes with the JS:

<input type="text" class="gatherZip" id="theTextBox" onblur="showWatermark('theTextBox')" onfocus="hideWatermark('theTextBox')" />

And the CSS:

.gatherZip{
   background: white url('IMAGE_LOCATION_HERE') no-repeat center center;
}

The image you create can say or imply whatever you want. As an estimate, try to keep the image no more than about 15 pixels high or it won’t fit in standard sized textboxes. And that’s it. A beautiful textbox watermark just for you and your users! Comments? Questions?