Comments on: Default Text Label in Textbox using JavaScript/jQuery

By: Viral Patel

Viral Patel — Fri, 09 Dec 2011 17:14:35 +0000

Hi Prateek, jQuery does provide live events which can be used to map events to any current and future element, but unfortunately live() does not provide any create method which can be used to handle new element creation. So for now the simplest solution (without adding any additional plugin) would be to wrap above javascript in some function() { } and call it everytime a new element is added.

By: Prateek Joshi

Prateek Joshi — Fri, 09 Dec 2011 13:13:02 +0000

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

By: Kemal

Kemal — Sun, 13 Nov 2011 00:09:55 +0000

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

By: Shana

Shana — Mon, 24 Oct 2011 17:10:12 +0000

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?

By: krishn pal

krishn pal — Sat, 05 Mar 2011 13:21:06 +0000

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

By: thiviya

thiviya — Fri, 13 Aug 2010 05:09:43 +0000

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

By: cem

cem — Sun, 18 Jul 2010 21:40:12 +0000

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!

By: Ed Cayce

Ed Cayce — Wed, 09 Jun 2010 21:58:02 +0000

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]

By: Greg

Greg — Thu, 27 May 2010 20:19:42 +0000

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

By: Md. Lutfor Rahman

Md. Lutfor Rahman — Wed, 05 May 2010 21:22:02 +0000

I had need this for deperture tracing system