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.

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

Input Watermark Example page

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

  1. 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?

  2. 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

  3. 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.

  4. 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;

    :-)

Comments are closed.