Adding a default text display in a text input is a common way to label a text input in order to provide instruction and clarity for a user. Here is a simple implementation using jQuery.

You can find the example here in jsFiddle.

First, let us add the HTML that will have a default text:

<input type="text" name="username" default_text="Enter a username" />

Here we added a default_text attribute to the input. The default_text will be used as the default text display. Next, let us code up the jQuery:

$('input[default_text]').bind('focus', function() {
    // Clear out default message.
    if ($(this).hasClass('empty')) {
        $(this).val('');
        $(this).removeClass('empty');
    }
});

$('input[default_text]').bind('blur', function() {
    // Add back the default message if the value is empty.
    if ($(this).val() === '') {
        $(this).val($(this).attr('default_text'));
        $(this).addClass('empty');
    }
});

Second, we have set up the event handlers for any input elements with a default_text attribute. When the user focuses on a text input, the default text will clear. If the user blurs away from the text input, then the text input would re-populate with the default_text value if the text value is empty. Here, we also add an empty CSS class to mark if the input is empty.

Let’s initialize the default_text inputs:

$('input[default_text]').each(function(index, el) {
    $el = $(el);
    $el.val($el.attr('default_text'));
    $el.addClass('empty');
});

Lastly, we have iterated through each default_text input to mark it empty.

Note: You will need to pre-process the form data before submitting. We would not want to submit the default text. Here is an example how we can pre-process the form data:

$('form#form_with_default_text').bind('submit', function() {
    // Clear out default_text values if empty.
    $('input[default_text].empty').val('');    
});

Last note: Currently, this implementation only works with input of type text. This shouldn’t be used with an input of type password. I’ll update this post later with a custom jQuery default text plugin that can handle both text and password types.