Have you ever wondered how people put text in their input fields and when you click on it, it disappears. This process is called input watermarking.

Bellow is the JavaScript I’m using on my sites. It is **XHTML** 1.0 transitional and **WCAG** priority 1,2 valid.

// Defining array that holds the IDs or Names of the inputs and the default text to display
// If you are using Names remeber that I am taking only the first one.
// The format is : 'ID1','VALUE1','ID2','VALUE2'....var inputs = new Array('firstname','firstvalue','secondid','secondvalue','thirdid','thirdvalue')
// Defining "indexOf" function for Internet Explorer
// It returns the index of the first occurance of an item in the array

if (!Array.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0); i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
    }
}

// Defining addEvent function since Internet Explorer does not support the official way of adding events

function addEvent(obj, type, fn) {
    if (obj.addEventListener)
    obj.addEventListener(type, fn, false);
    else if (obj.attachEvent)
    {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
    }
}

function inputWatermark() {
    if (inputs.length < 2 || inputs.length % 2 != 0) {
        alert('Wrong usage - please read the source comments!');
    }
    for (i = 0; i < inputs.length; i++) {
        if (i % 2 == 0 && (document.getElementById(inputs[i]) || document.getElementsByName(inputs[i])[0])) {
            var cur = (document.getElementById(inputs[i])) ? (document.getElementById(inputs[i])) : (document.getElementsByName(inputs[i])[0]);
            cur.value = inputs[i + 1];
            addEvent(cur, "focus", onFocusHandler);
            addEvent(cur, "blur", onBlurHandler);
        }
    }
}

function onFocusHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '' || this.value == inputs[inputs.indexOf(inpname) + 1]) {
        this.value = '';
    }
}

function onBlurHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '') {
        this.value = inputs[inputs.indexOf(inpname) + 1];
    }
}

addEvent(window, "load", inputWatermark);

Usage: Just fill the array with the IDs and the values. Instead of IDs you can use names

Input Watermark Example page

Comments

Comment by Cash Advance on 2007-09-14 20:15:53 +0300

Wonderful blog post covering WAI / XHTML Valid Input Fields Watermark. Always enjoy your view.

Comment by Wahoo on 2007-10-06 04:52:22 +0300

Thank you for sharing!

Comment by admin on 2007-10-07 22:31:57 +0300

Cheers

Comment by Mark on 2007-10-23 19:12:45 +0300

I’m having an issue with this code, as it is writing the watermark values to the database if the user does not override with their own entry. Is there any way to prevent this behavior?

Comment by admin on 2007-10-23 22:07:52 +0300

yes – you can make your form to check if the values are the default on submit

or even better to disable the submit button until entered different values

Comment by Daniel on 2007-11-26 12:22:18 +0300

I couldn’t understand some parts of this article HTML Valid Input Fields Watermark | Peter Velichkov’s Blog, but I guess I just need to check some more resources regarding this, because it sounds interesting.

Comment by ariel on 2008-05-07 17:29:52 +0300

Thanks a lot for sharing this script! Is very nice and simple. Here is an enhacement to make the watermark text gray:

add 2 vars:
var watermarkColor = ‘gray’;
var normalColor = ‘black’;

add new event in inputWatermark():
addEvent(cur, “keypress”, onTextChange);

add this new function:
function onTextChange() {
var inpname = this.id ? this.id: this.name;
if (this.value == ”) {
this.style.color = normalColor;
}
}

in onBlurHandler(), inside the if:
this.style.color = watermarkColor;

:-)