Question

我想要一个带有一些默认文本的textarea。当用户点击textarea时应删除默认文本。如何才能让textarea的值在点击时消失？

我想要它，http://www.webune.com/forums/20101025cgtc.html

但我希望它在jQuery中完成。

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

Answer 1

我使用它作为它更通用 - 它将清除焦点上元素的值，但如果为空则将元素的值返回到默认值。

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

Answer 2

即使没有JavaScript，您也可以使用placeholder attribute完成此操作。

但是你应该知道并非每个浏览器都支持它。在这种情况下，您可以使用例如此插件：http://plugins.jquery.com/project/input-placeholder

Answer 3

这应该有效：

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

现场演示： http://jsfiddle.net/g7UKN/1/

<强>更新

这应该这样做：

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

现场演示： http://jsfiddle.net/g7UKN/2/

Answer 4

非常简单的非jQuery依赖解决方案：

<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() = "";
     }
});

//修改

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

试试下面的代码段。第一次单击文本区域时，它会清空内容。

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

Answer 7

你需要两个处理程序，一个用于元素获得焦点，一个用于何时失去它。当它获得焦点时，检查该值是否只是空格字符，如果是，则将值设置为默认值。

$('#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

如果有人想在ajax加载的textareas上执行此操作，您可以使用.live()事件来实现此目的;）

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

jQuery：textarea默认值在点击时消失

8 个答案: