Default Text Label in Textbox using JavaScript/jQuery

nick says:

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

Viral Patel says:

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.

Mark Kadlec says:

Very nice Viral! I’m surprised that asp.net doesn’t have this type of control functionality.

ben says:

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.

vikas says:

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?

James says:

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.

Md. Lutfor Rahman says:

I had need this for deperture tracing system

Greg says:

Any ideas on how this could be made to work with a password input?

Ed Cayce says:

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]

cem says:

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 :

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

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!

thiviya says:

i have a problem where i call the java script in textbox using .net. pls give me a solution.

krishn pal says:

this field label only for input text
like :- Enter user name (for input field)

how can i use in password field i change “text” field in password

it not working

what should i do

plz help as soon as possible

Shana says:

Won’t this be an issue when you need to validate required fields, though? If the user submits a form without entering anything, it will submit that default text as the value, so then it won’t properly recognize that the user didn’t fill out the required field. How do you get around this?

Prateek Joshi says:

it doesn’t work when we dynamically add the textbox on click of the add-more button. please provide a solution for this.

sweetmaanu says:

Hi
This tutorial is really useful for me.

I’m just building a Malayalam English online dictionary.

this tutorial really useful for me

Thank you very much :)

Nirmal says:

Thanks this was helpful.

Berni Ball says:

Could anyone tell me how to add a onsubmit check to make sure default values aren’t submitted?

Many thanks

Berni Ball says:

If anyone needs to add a check on onsubmit:
http://stackoverflow.com/questions/9727032/text-labels-in-textbox-being-passed-onsubmit

niraj says:

hi, all

can anyone tell me, how I can disply ” division of two combobox values and then multiplying the answer with the a contant number” in a texbox in nuace PDF professional 5.

daham says:

This was really helpful. Thanks

Morten says:

very helpfull

Sayed Ahmad says:

Thanks a lot I place the whole Jquery code inside the
$(document).ready(function(){ your code here });
it work properly

Girish says:

hi viral nice tutorial. how can i use this for tag html:text ?

Mayur says:

So you cannot put the javascript in the header section or else it won’t work. Javascript has to be below the form for this to work. It wasn’t working for me at first then i checked the source of online demo and saw that javascript was at the end after Is there any way to make this work by having javascript in the header?

Marcelo says:

Straight and easy. Thank you!

Agung Setiawan says:

so you want to add watermark in your tex tbox?
now it is so much easy to do it, just use placeholder attribute inside input tag
ex:

Agung Setiawan says:

so you want to add watermark in your tex tbox?
now it is so much easy to do it, just use placeholder attribute inside input tag
ex:

<input type="text" placeholder="Enter Username" id="username" />

dave says:

Great solution, thanks

kedar says:

Really You made my day.. ..Many Thanks

Samar says:

This post is very nice Post. It is working for me as well.
Thanks you so much Viral

Koveksi Kaos Bandung says:

it’s very nice tutorial jquery labeling text box… i’m interesting to use it for my website. thanks

mahesh says:

how do i integrate it in one html file

sathik says:

this one is great solution for my doubt

anji says:

this one is good actuallly i want jquery validation in java

anji says:

Please tel me suggestion

Pardeep says:

Hi Viral ,
.Focus and .blur not working on IPAD,
is there any other way to do this.

saneera says:

it’s very nice tutorial jquery labeling text box… i used this in my web site

pankaj says:

Nice article. I use placeholder attribute as mentioned by Agung Setiawan. The difference is that it disappears when you start typing and not on click. It also saves a lot of code.

<input type="text" placeholder="Enter Username" id="username" /> 

izo says:

wonderful

konveksi kaos bandung - kaoskaosbandung says:

it’s nice tutorial, i’ll try this for my website

Pratik says:

Hey Viral,
i can’t see the output i.e.
label on textbox…
plz help me…

konveksi jogja says:

thanks for sharing .. i like your post ebaout default text label.. and your tutorial very great..

Konveksi kaos murah bandung says:

thank his knowledge is very useful for me that still lay ,,

Jasa Konveksi kaos promosi murah says:

Hopefully useful ya ..

abdul says:

hi all i want to make a simple widget
one text box and submit button
that i integrate many web site so that please give me source code

Kaos Partai says:

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.

Alat Bantu says:

Thank You I Like This Four You

Michael says:

would it not just be easier to add placeholder?

Konveksi Kaos says:

Very important information. This is very useful for me to apply on my web for more optimal results.
Thanks for sharing and we wait for other quality articles ….

Konveksi Celana Jeans says:

Very important information. This is very useful for me to apply on my web for more optimal results.
Thanks for sharing and we wait for other quality articles ….

Konveksi kaos jogja says:

thanks for sharing ..

Vendor Kaos Bandung says:

Thanks for the code, i hope it’s work for my pages

Antonio Grosir says:

thank his knowledge is very useful for me

Konveksi Seragam says:

nice share, thank you. good luck