WAI / XHTML Valid Input Fields Watermark

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
< script type = "text/javascript" > 
 
<!--
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
// 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);
 
//-->
< /script>

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

Input Watermark Example page

Tags: , , ,

7 Responses to “WAI / XHTML Valid Input Fields Watermark”

  1. Cash Advance Says:

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

  2. Wahoo Says:

    Thank you for sharing!

  3. admin Says:

    Cheers

  4. Mark Says:

    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?

  5. admin Says:

    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

  6. Daniel Says:

    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.

  7. ariel Says:

    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;

    🙂

Leave a Reply