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?

3 Responses to “Javascript: Creating an Image Watermark”

  1. Giljed Jowes says:

    Thanks! It works perfectly. Using images instead of text as watermark is a good solution.

  2. Narender says:

    Stupid question !
    But I want to know if image can be replaced with text !
    Any idea.. I tried manipulating but unable to fix it for text