Search 
DailyCoding > Design

"Default Text" Fields Using Simple jQuery Trick

Explains how to implement default text input field using simple jQuery trick
Author admin on Aug 1, 2008 21 Comments
Rate it    (Rated 4 by 38 people)
13,815 Views

A lots of the time you want to add instructions to text box fields of the page to provide usability information to the users. Alternate way of doing this could be using default text in the input fields. A default text is the text which appears in the text box when it is empty. e.g.

Name
Email
Website
Comment

You can see this is useful and good idea to have this in the UI. There is an easy trick in jQuery to do this. Below is the step by step procedure to do this.

Step1

If you don't have jQuery then download latest from its website and include in you page.

<script src="jquery.js" type="text/javascript"></script>

Step 2

Create two CSS classes defaultText and defaultTextActive as mentioned below.

<style media="screen" type="text/css">
    .defaultText { width: 300px; }
    .defaultTextActive { color: #a1a1a1; font-style: italic; }
</style>

Step 3

Add this JavaScript to you page

<script language="javascript">
<!--
$(document).ready(function()
{
    $(".defaultText").focus(function(srcc)
    {
        if ($(this).val() == $(this)[0].title)
        {
            $(this).removeClass("defaultTextActive");
            $(this).val("");
        }
    });
    
    $(".defaultText").blur(function()
    {
        if ($(this).val() == "")
        {
            $(this).addClass("defaultTextActive");
            $(this).val($(this)[0].title);
        }
    });
    
    $(".defaultText").blur();        
});
//-->
</script>

Step 4

To every text field or text area where you want to apply default text add "defaultText" as css class and specify the default text in the title attribute. e.g.

<input class="defaultText" title="e.g. someone@example.com" type="text" />

You default text setup is ready. Run the page and see the magic. Click here for a running sample page.

CSS | Html | Javascript | jQuery | Utility

Discussion

Bill On Aug 2, 2008 12:34 PM
What would you suggest doing in a case where the field might not be filled by the user. Currently the text that is being put in the title attribute is posted back? I would imagine there has to be a way using jquery to remove it on submit, but this is my first day looking into what is possible with jquery.

Bill On Aug 2, 2008 12:43 PM
I just found this plugin that removes the text prior to submit: http://plugins.jquery.com/project/ToggleFormText. I found it from a link in a Matt Berseth article http://mattberseth.c....xtboxwatermark.html.

SeanJA On Aug 3, 2008 10:08 AM
I think the code would probably look something like:

onSubmit(foreach(".defaulttext"){
if (title of field = content of field){
content of field = ""
}
}

I don't really know javascript, but it can't be that difficult to figure out.

SeanJA On Aug 3, 2008 10:09 AM
Awww... it lost its formatting...

SeanJA On Aug 3, 2008 10:11 AM
And looking at the plugin, that is exactly what it was...

Alex On Aug 13, 2008 01:58 AM
To clear the default text on submit:

<pre>
$("form").submit(function() {
$(".defaultText").each(function() {
if($(this).val() == this.title) {
$(this).val("");
}
});
});
</pre>

Daily Coder On Aug 13, 2008 05:20 AM
Alex, thanks for the solution.

Vaibhav Gupta On Sep 12, 2008 01:08 AM
$("form_name").submit(function() {
$(".defaultText").each(function() {
if($(this).val() == $(this)[0].title) {
$(this).val("");
}
});
});

Rubist On Feb 10, 2009 06:22 AM
Yeah,

Its not removing the css class "defaultTextActive" if i use data picker of jquery

Andrew On Mar 21, 2009 03:15 PM
Hello,
on a page with multiple panels hiden and only one visible (wizard like), when I go back, the default text became none italic and none blur. So if i press the previous step button the default text looks like a regular one. In this case the (document).ready(function() not fired (it returns false so the (".defaultText").blur() is ignored). How could i call it?
Thanks.

kav On Mar 21, 2009 06:01 PM
Refresh or reload this page and it will break down the italic and blur.

lewis On Mar 24, 2009 07:29 AM
If you are displaying error and setting values to the post values ... I used this to re-style the default text:
$.each($(".defaultText") ,function(){
if ($(this).val() == $(this)[0].title)
{
$(this).addClass("defaultTextActive");
}
});

,m.,m On Mar 31, 2009 03:05 AM
.m,.m,.

HeavyP On Apr 28, 2009 01:45 PM
FANTASTIC!!!
I've been hunting for something like this for days!
There is all sorts of different ways to skin this cat but working with multiple language and having the DEFAULT TEXT change too and load quickly was what I was looking for...and here it is!
Does someone know how to make the PASSWORD input field change from TEXT to PASSWORD on focus, remain PASSWORD if something is typed in but if nothing is typed in or it remains DEFAULT VALUE it returns to TEXT?
That would be pretty slick indeed!
Thanks.

Leandro Santana Pereira On May 3, 2009 07:23 PM
I fixed the bug that removes the italic when we reload or go back to the page put the following source into the begging of the document.ready:

$(".defaultText").each(function(){
$(this).addClass("defaultTextActive");
$(this).val(jQuery(this)[0].title);
});

Rinke van den Berg On May 20, 2009 11:11 PM
This also fixes it:
At the end of the document.ready put:

$(".defaultText").focus();
$(".defaultText").blur();

instead of just:

$(".defaultText").blur();

Might be a bit nicer because it uses the same functions (in case something changes in those functions).

By the way, I would come here more often if there were just banners instead of nasty popups.

Niyaz On May 30, 2009 07:46 AM
I am using this code in one of the web-apps I am developing.

Thank you very much.



leo On Aug 10, 2009 10:32 PM
The following link from cloudgen is similar to the example, however it is wrapped by a jQuery function:
http://cloudgen.w0ng.hk/jquery/defaultText.php

Jordi On Nov 25, 2009 11:13 AM
I have one text default plugin for jquery and I think that is more simply to use.

http://www.jordigiro....cto-formularios.html

Anton Venema On Jan 4, 2010 01:46 PM
Here's a short plugin variant I use. It improves default detection when the entered text matches the title, it incorporates Alex's fix for form submission, and it allows reuse throughout a site.

jQuery.fn.defaultText = function() {
var self = this;
$('form').submit(function() {
$(self).each(function() {
var t = $(this);
if (t.val() == t.attr('title') && t.hasClass('default')) {
t.val('');
}
});
});
return $(this).blur(function() {
var t = $(this);
if (t.val() == '') {
t.val(t.attr('title'));
t.addClass('default');
}
}).focus(function() {
var t = $(this);
if (t.val() == t.attr('title') && t.hasClass('default')) {
t.val('');
t.removeClass('default');
}
}).blur();
};
$(document).ready(function() {
$('input[type="text"]').defaultText();
});

Anton Venema On Jan 4, 2010 01:47 PM
Note that the last 3 lines are an example of how to use the plugin.

Leave a Comment

Name
Email Address
Web Site
© Copyright 2008 Daily Coding • All rights reserved