Default Text Label in Textbox using JavaScript/jQuery
In one of my previous article about Change Form Textbox Style on Focus, we discussed about Usability and HCI issues. Slight change in web pages/input forms can increase user experience. Nowadays, it has became a common practice to give user labels on fields that they are editing. For example, if you see Google’s custom search textbox in any website, most of them will have a Google’s Logo in background and when user clicks on Textbox, the logo disappears. Thus we can create an input form with labels in background of textboxes. When user select the textboxes, the labels disappear enabling user to edit the textbox. Let us see how can we use JavaScript/jQuery to achieve this.

Step 1: The HTML

We will use following simple HTML Form. Create an HTML file and Copy and paste following code. 
<FORM method="post">
<TABLE>
<TR>
 <TD>Username</TD>
 <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
</TR>
<TR>
 <TD>Age</TD>
 <TD><INPUT type="text" value="" name="username" title="Enter Age"/><TD>
</TR>
<TR>
 <TD>City</TD>
 <TD><INPUT type="text" value="" name="username" title="Enter City"/><TD>
</TR>
<TR>
 <TD>Comment</TD>
 <TD><INPUT type="text" value="" name="username" title="Enter Comment"/><TD>
</TR>
</TABLE>
</FORM>

Code language: HTML, XML (xml)
Notice that while defining each text fields, we have provided title attribute. The text that is displayed on background of textbox is taken from the Title attribute. So generally the title attribute should be like “Enter Email Address” or “Type Address”.

Step 2: The CSS

Copy following CSS in your HTML file. You may want to include a separate CSS file for this. 
.text-label {
 color: #cdcdcd;
 font-weight: bold;
}

Code language: CSS (css)
The above CSS class is applied to the Textbox when user has not entered anything in it. Once the user starts typing in Textbox the CSS class is removed.

Step 3: The JavaScript

We are almost done with our implementation. Only thing left is the JavaScript code that actually add and remove css to textboxes. 
$('input[type="text"]').each(function(){

 this.value = $(this).attr('title');
 $(this).addClass('text-label');

 $(this).focus(function(){
  if(this.value == $(this).attr('title')) {
   this.value = '';
   $(this).removeClass('text-label');
  }
 });

 $(this).blur(function(){
  if(this.value == '') {
   this.value = $(this).attr('title');
   $(this).addClass('text-label');
  }
 });
});

Code language: JavaScript (javascript)
The above code is straight forward. For each textbox in the webpage, we hook handler function to events focus and blur. When Textbox is focused, check if the value is same as Title. If so, then remove the background label css and let user edit the value in textbox. And while blur event(focus lost), check the value: if user has not entered anything, set the background css again.

Online Demo

 Online Demo

View Comments

  • hi viral..
    i use asp.net and want to try your code..
    when i run the code, a error message appears "Microsoft JScript runtime error: Object expected"

    $('input[type="text"]').each(function() {
 this.value = $(this).attr('title');
 $(this).addClass('text-label');
 $(this).focus(function() {
  if(this.value == $(this).attr('title')) {
   this.value = '';
   $(this).removeClass('text-label');
  }
 });

 $(this).blur(function() {
  if(this.value == '') {
   this.value = $(this).attr('title');
   $(this).addClass('text-label');
  }
 });
});

    plz help me

    • [code language="js"]
      $(function () {
      var searchBox = $('#');
      searchBox.focus(function () {
      if (searchBox.val() == this.title) {
      searchBox.removeClass('text-label');
      searchBox.val('');
      }
      });
      searchBox.blur(function () {
      if (searchBox.val() == '') {
      searchBox.addClass('text-label');
      searchBox.val(this.title);
      }
      });
      searchBox.blur();
      });
      [/code]

    • i used this code in asp.net but i didn't get output....
      if any changes required
      pls send me the code need to change....

  • Hi Nick,
    The code looks fine to me. The error you are getting is because some object has not been initialized properly. Can you confirm if you have included jQuery javascript file in your code?
    You must have something like following in your html:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    You can do one thing. Take a look at source code of Online demo and see if you are missing anything in your code.

  • This is a good start, but could use some polishing. I added a check to see if the title attribute exists for field and added an onsubmit check to be sure we don't submit default text.

    It'd also be nice to use it on textareas, which shouldn't be too hard.

  • Hi, Viral
    It's working fine with the form that load with in the same page but when I'm loading a form through Ajax in a particular div tag t his won't work with the dynamically loaded forms.
    Is their any way to works also with dynamically loaded form?

  • Hi,

    Great! It is straightforward. I just wonder why it doesnt work if I am putting the script on an external source or even putting it on the tag. It only works when the script is positioned before the tag.

  • Hey everyone, here is one I made that handles Password inputs as well, and also ignores text boxes with no Title attribute. You can't change input types dynamically with all browsers so instead I show and hide two different inputs. You need one with ID Password and another with ID PasswordDummy, For clients with no javascript, best to set PasswordDummy to display:none initially.

    Enjoy.

    [CODE="js"]

    $('input').each(function() {

    if (this.id == 'Password') {
    // Handle Password differently - it only gets an onblur, in which it gies invisible and activates the PasswordDummy if it is empty

    // if its blank, make it invisible and Dummy visible
    if (this.value == '') {
    $(this).hide();
    $("#PasswordDummy").show();
    }
    else {
    $(this).show();
    $("#PasswordDummy").hide();
    }

    $(this).blur(function() {
    if (this.value == '') {
    $(this).hide();
    $("#PasswordDummy").show();
    }
    else {
    $(this).show();
    $("#PasswordDummy").hide();
    }
    });
    }
    else if (this.id == 'PasswordDummy') {
    // Handle Password Dummy differently
    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function() {
    $(this).hide();
    $("#Password").show();
    $("#Password").focus();
    });
    }
    else if ($(this).attr('title') != undefined) {
    if (this.value == '') {
    this.value = $(this).attr('title');
    $(this).addClass('text-label');
    }

    $(this).focus(function() {
    if (this.value == $(this).attr('title')) {
    this.value = '';
    $(this).removeClass('text-label');
    }
    });

    $(this).blur(function() {
    if (this.value == '') {
    this.value = $(this).attr('title');
    $(this).addClass('text-label');
    }
    });

    }

    });

    [/CODE]

  • Hi,
    I'am a asp.net user and I want to say someting about your code.Firstly I appreciate you for your simple and chic code.I have been using it very well.But I want to add some missing code(according to me :)).My Code :
    [code language="js"]
    $('input[type="text"]').each(function(){
    if( this.value==this.title){
    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function(){
    if(this.value == $(this).attr('title')) {
    this.value = '';
    $(this).removeClass('text-label');
    }
    });

    $(this).blur(function(){
    if(this.value == '') {
    this.value = $(this).attr('title');
    $(this).addClass('text-label');
    }
    });
    }
    });
    [/code]
    Of Course that's your code,not mine.But I added oneline,why?
    After the same page loading, the value of textbox continue to stand in the textBox.What will be doing is to prevent this problem. So now, after the page loading your code works very well!

Leave a Comment
Share
Published by
Viral Patel
Tags: JavaScript javascript events jquery tips tricks jquery ui tutorial
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago