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>

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;
}

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');
		}
	});
});

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