Add Default Text for Text Inputs using jQuery

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.