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>

回答1:

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

回答2:

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

回答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/

回答4:

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>

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

回答6:

Just try the below snippet. First time you click on the text area it empties the content.

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

回答7:

You need two handlers, one for when the element gets focus and one for when it loses it. When it gets focus, check to see if the value is only space characters and, if so, set the value to the default.

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

回答8:

And if someone wants to do this trick on a ajax loaded textareas 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';
        }
    });