Comments on: Tutorial: Clearing the Textarea value onFocus

By: Ahmed A.

Ahmed A. — Sun, 01 Aug 2010 07:08:55 +0000

Hey Martin, you saved my life :) the code works perfectly. I just like to mention that you MUST load jQuery library first:

By: Viktor Edholm

Viktor Edholm — Sat, 09 Jan 2010 22:09:17 +0000

Great tutorial! I myself would use Martin’s method because it fits my workflow better, when I build a websites backend and structure I don’t care about details such as textarea focus and his method allows me to be more efficent when adding it afterwards.

By: Stu Greenham

Stu Greenham — Fri, 08 Jan 2010 13:55:09 +0000

Thanks for your comment, I am going to update this code so that the value re-appears if no text is entered like Martin said previously, just haven’t got around to it yet :)

By: Stu Greenham

Stu Greenham — Fri, 08 Jan 2010 13:53:41 +0000

Yeah sorry about that I need to get my comments code rendering looked at thanks for spotting it tho! :)

By: Evan Sharp

Evan Sharp — Thu, 07 Jan 2010 17:06:14 +0000

^fieldset^

By: Evan Sharp

Evan Sharp — Thu, 07 Jan 2010 17:05:34 +0000

… damn that html rendering! I even used ‘code’ tags! Arg!

By: Evan Sharp

Evan Sharp — Thu, 07 Jan 2010 17:04:59 +0000

@Stu,
My mistake, I should have been paying more attention when climbing on my horse (note the timestamp of my first comment…).

All the same, (and I know its a prickly issue which I don’t want to poke myself with here), I’m a kind of guy anyway.

Great use of the DOM for the behaviour regardless.

By: Jeevan Takhar

Jeevan Takhar — Thu, 07 Jan 2010 01:14:07 +0000

Hi Stu,

You may want to add a check that only clears the element if its content matches the default value. This prevents text written by the user being cleared upon a subsequent focus event.

By: Stu Greenham

Stu Greenham — Wed, 06 Jan 2010 23:54:35 +0000

Thanks Martin for this! I will be sure to give it a try myself! Appreciated!

By: Martin

Martin — Wed, 06 Jan 2010 04:56:29 +0000

This is the code I use for clearing a default value, it is almost like Adam's code, except it restores the default value on blur if the user left the field empty...


$(function() {
	$('input, textarea').each(function() {
		var field = $(this);
		var default_value = field.val();
		
		field.focus(function() {
			if (field.val() == default_value) {
				field.val('');
			}
		});
		
		field.blur(function() {
			if (field.val() == '') {
				field.val(default_value);
			}
		});
	});
});