Add Default Text for Text Inputs using jQuery

BY

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:

[code language=”html”]
<input type="text" name="username" default_text="Enter a username" />
[/code]

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:

[code language=”javascript”]
$(‘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’);
}
});
[/code]

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:

[code language=”javascript”]
$(‘input[default_text]’).each(function(index, el) {
$el = $(el);
$el.val($el.attr(‘default_text’));
$el.addClass(’empty’);
});
[/code]

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:

[code language=”javascript”]
$(‘form#form_with_default_text’).bind(‘submit’, function() {
// Clear out default_text values if empty.
$(‘input[default_text].empty’).val(”);
});
[/code]

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.

Leave a Reply

Your email address will not be published. Required fields are marked

Your comment

Your name, please

Your email, please

POSTED

December 29, 2012

SHARE POST

LOCATED IN

(62)

TAGS

(21)
(5)

CATEGORIES

HAVE A QUESTION ABOUT OUR SERVICES?

Ready to start on a project?

WANT TO SEE OUR WORK?

Visit our case studies page or request specific project examples.