Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: textarea default value disppear on click

I want a textarea with some default text. When the user clicks in the textarea the default text should be deleted. How can I make value of a textarea disappear on click?

I want it exactly like this, http://www.webune.com/forums/20101025cgtc.html

But I wish it made in jQuery.

<textarea id="textarea">This should be removed..</textarea>
like image 528
Karem Avatar asked Feb 20 '11 20:02

Karem


3 Answers

I use this as its a bit more generic - it will clear out the element's value on focus, but return the element's value to the default value if empty.

$("#textarea")
  .focus(function() {
        if (this.value === this.defaultValue) {
            this.value = '';
        }
  })
  .blur(function() {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
});
like image 50
ScottE Avatar answered Nov 13 '22 16:11

ScottE


You can accomplish this even without JavaScript by using placeholder attribute.

But you should be aware that not every browser supports it yet. In this case you can use for instance this plugin: http://plugins.jquery.com/project/input-placeholder

like image 29
Igor Pavelek Avatar answered Nov 13 '22 16:11

Igor Pavelek


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>
like image 20
Jake Wilson Avatar answered Nov 13 '22 15:11

Jake Wilson