Question

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = 'Type here';
        }
    });
});

I have this block of code that works perfectly except that it is not dynamic. I was wondering if there was an elegant way to reset the value to the original dynamically. I was thinking that maybe if you defined the original text in its ID or some other sort of attribute you could reset it that way.. or maybe you could use variables or arrays or tuples. What does SO think is the best way of doing it?

Answer 1

How about storing the value into some other attribute of the input?

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.title = this.value;
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = this.title;
        }
    });
});