Default Value for Input Text

This is a Javascript that will erase and replace a string of default text for an input element on a web form when the users clicks into or out of a field. I have probably written forms of this script about a thousand times in about a thousand different ways, however this is one of more elegant ways I have done it and I wanted to record it here. You can see a working version of this script by clicking here.

<script type="text/javascript">

/**
 * Maintains a default value for any number of input elements in a form.
 *
 * More details at http://www.finefrog.com/2007/10/07/default-value-for-input-text/
 *
 * @author Jordon Mears <jordoncm at gmail dot com>
 *
 * @param object element Reference to the input element.
 * @param string status Whether it was called onfocus or onblur.
 * @param string text The default text.
 */
function default_text(element, status, text) {
    switch(status) {
        case 'focus':
            if(element.value == text) {
                element.value = '';
            }
            break;
        case 'blur':
            if(element.value == '') {
                element.value = text;
            }
            break;
    }
}

</script>

<form action="" method="post">
<input type="text" value="default text"
onfocus="default_text(this, 'focus', 'default text');"
onblur="default_text(this, 'blur', 'default text');" />
</form>

Anyone is welcome to use this script, all I ask is for you to maintain the credits (and maybe leave me a comment).

Leave a Reply

{
}