JQuery: default value of textarea disppear on click

Question

I need a text area with default text. When the user clicks on the text box, the default text should be deleted. How can I change the value of textarea when clicked?

I want it to be so, http://www.webune.com/forums/20101025cgtc.html

But I want this done in jQuery.

<textarea id="textarea">This should be removed..</textarea> 

Answer 1

I use this as a little more general - it will clear the element value in focus, but will return the element value to the default value if it is empty.

 $("#textarea") .focus(function() { if (this.value === this.defaultValue) { this.value = ''; } }) .blur(function() { if (this.value === '') { this.value = this.defaultValue; } }); 

Answer 2

You can do this even without JavaScript using the placeholder attribute.

But you should know that not all browsers support it. In this case, you can use, for example, this plugin: http://plugins.jquery.com/project/input-placeholder

Answer 3

This should work:

 $('#txt') .focusin(function() { if ( this.value == 'Write something...' ) { this.value = ''; } }) .focusout(function() { if ( this.value == '' ) { this.value = 'Write something...'; } }); 

Live demo: http://jsfiddle.net/g7UKN/1/

---

Update:

This should do it:

 $('#txt') .each(function() { $(this).data('default', this.value); }) .focusin(function() { if ( this.value == $(this).data('default') ) { this.value = ''; } }) .focusout(function() { if ( this.value == '' ) { this.value = $(this).data('default'); } }); 

Live demo: http://jsfiddle.net/g7UKN/2/

Answer 4

A very simple non-jQuery-dependent solution:

 <textarea onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">Hello World</textarea> 

Answer 5

 $('#textarea').click(function(){ if($(this).val() == "This should be removed.."){ $(this).val() = ""; } }); 

//edit

 var defaultTextAreaValue = "This should be removed.."; $('#textarea').focus(function(){ if($(this).val() == defaultTextAreaValue){ $(this).val(""); } }); $('#textarea').blur(function(){ if($(this).val() == "" || $(this).val() == defaultTextAreaValue){ $(this).val(defaultTextAreaValue); } }); 

Answer 6

Just try the snippet below. The first time you click on a text area, it empties the contents.

 $('#textarea').focus(function(){ $(this).empty(); }); 

Answer 7

You need two handlers, one for those when the element gets focus, and the other for when it loses focus. When it receives focus, check if the value is just spaces, and if so, set the default value.

 $('#textarea').focus( function(){ var $this =$(this); if($this.val() == 'This should be removed..'){ $this.val(''); } }).blur(function() { var $this = $(this); if ($this.val().match(/^\s*$/) { // matches only spaces or nothing $this.val('This should be removed..'); } }); 

Answer 8

And if someone wants to do this trick in loadable text areas with ajax, you can achieve this with the .live() ;) event.

 $('#textarea').live('focusin',function () { if (this.value === 'leDefault ...') { this.value = ''; } }); $('.larger').live('focusout',function () { if (this.value === '') { this.value = 'leDefault'; } });