Tutorial: Clearing the Textarea value onFocus

Get our posts emailed to you with our monthly newsletter, subscribe here.

Quick tip that will always come in handy when creating forms. More often then not you will see a textarea that initially has some text in, something like… ‘Type your message here…’. On some websites, I have noticed that when you go to type in that same textarea you have to first remove the message before you start typing yours which I find very frustratings.

There is a simple line of code that will fix this and clear your message when they click on the textarea box. First you need to create your form, below I have included some sample form code:

[php] <form name="test_form">
<dl>
<dt><label for="field_one">Field One</label></dt>
<dd><input type="text" name="field_one" value="" size="100" /></dd>

<dt><label for="field_two">Field Two</label></dt>
<dd><textarea name="field_two" rows="10" cols="100">Type your message here…</textarea></dd>
</dl>
</form>
[/php]

To make the text disappear on click we use the event handler onFocus which will basically run once the Textarea is in an ‘active’ state. We need to add in the following to our form:

[php] onFocus="this.value=”; return false;"
[/php]

Add it inside the opening textarea tag so you will end up with a form looking like this….

[php] <form name="test_form">
<dl>
<dt><label for="field_one">Field One</label></dt>
<dd><input type="text" name="field_one" value="" size="100" /></dd>

<dt><label for="field_two">Field Two</label></dt>
<dd><textarea name="field_two" rows="10" cols="100" onFocus="this.value=”; return false;">Type your message here…</textarea></dd>
</dl>
</form>
[/php]

Thats it done, nice and simple! You can download the source code for this below or view a demo here.

View Demo

Source Code

Posted by Jason Bayless

All Posts

17 Comments

  1. Julie 2010-09-21 at 17:35

    Works like a charm. Thanks!

  2. Viktor Edholm 2010-01-09 at 22:09

    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.

  3. Evan Sharp 2010-01-07 at 17:05

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

    1. Stu Greenham 2010-01-08 at 13:53

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

  4. Evan Sharp 2010-01-07 at 17:04

    @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.

  5. Jeevan Takhar 2010-01-07 at 01:14

    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.

    1. Stu Greenham 2010-01-08 at 13:55

      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 :)

  6. Martin 2010-01-06 at 04:56

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

    1. Stu Greenham 2010-01-06 at 23:54

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

    2. Ahmed A. 2010-08-01 at 08:08

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

  7. Evan Sharp 2009-12-26 at 05:08

    … evidently html tags are rendered in your comments, so my text makes no sense.

    I mentioned -p-, -span-, and -div- tags.

  8. Evan Sharp 2009-12-26 at 05:03

    Hi Stu,

    Excellent note about this, it is so often poorly implemented!

    I must echo Adam’s sentiment: putting this CDATA code inline is poor form. It’s much better to separate it out into a separate file; using jQuery for the behaviour or otherwise.

    I also wanted to comment (read: cheekily scold you) about using tables for layout in your form sample markup. I hope you don’t do that at work! Using tables for layout it *so* 1995. Form elements are hardly tabular data, so they don’t really belong in a table. It would be much better to use either , , or tags to keep labels and fields together. Being block-level, the and the will make the form quite intelligible in the absence of the layout layer (CSS), while using can be useful if the label belongs inline with the field. With more semantic markup, you can then do the layout however you need to with CSS.

    Given this, the markup will be lighter, the layout is easier to create and edit, and the behaviour is nicely abstracted into a separate file.

    1. Stu Greenham 2009-12-29 at 02:17

      Hi Evan,

      Thanks taking the time to comment on my blog! I am a little confused as to where these tables are? For my sample source code I have used dl’s not tables?

  9. Stu Greenham 2009-12-10 at 00:27

    Cheers Adam,

    Great comment! Nice example using jQuery to get the same effect, just so used to using that cheeky line of code but I will definitely use your example at some point! :)

    Thanks for posting!

  10. Adam Carlile 2009-12-10 at 00:13

    Hey stu!

    You could do the same without using the html onFocus event. jQuery has some good options for unobtrusive javascript

    $(document).ready(function(){

    $(‘dl dd textarea’).focus(function(){
    $(this).val(”)
    })

    });

    You could even make the script automatically replace the value with something that you specify in the markup. jQuery is really very powerful stuff :)

    -Adam

    1. Stu Greenham 2009-12-29 at 09:37

      I am a little dissapointed you don’t have a gravatar icon Adam :P haha

Comments are closed.