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

【问题标题】：jQuery: textarea default value disppear on clickjQuery：textarea默认值在点击时消失
【发布时间】：2011-02-20 20:16:07
【问题描述】：

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

我想要完全一样的，http://www.webune.com/forums/20101025cgtc.html

但我希望它是用 jQuery 制作的。

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

【问题讨论】：

如果它可以在纯 JavaScript 中工作，为什么要用 jQuery 让它复杂化？
@DavidThomas 我想让文本“这应该被删除..”不是在 javascript 变量中，而是在 html 中，我更喜欢 jquery

标签： jquery textarea onclick

【解决方案1】：

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

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

【讨论】：

html5 现在具有占位符属性。 developer.mozilla.org/en/HTML/Element/textarea

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这应该有效：

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

【讨论】：

这是我希望的工作方式，虽然还有一件事，但它应该检查“Write something...”的默认值，所以如果我这样做：BLABLA 那么它应该检查“BLABLA”而不是“写点什么……”
@Karem 选择斯科特的答案。他使用defaultValue 属性来存储TEXAREA 元素的初始值。所以，data('default') 是不需要的。

【解决方案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);
      }
});

【讨论】：

您应该使用.blur 和.focus，因为可以使用标签进入和离开文本区域。 $(this).val() = ""; 也应该是 $(this).val("");
@Aleksi 你的权利我刚刚测试了我自己的建议并想知道为什么它不起作用:-)
如果没有输入任何内容，我希望 textarea 再次模糊显示“这应该被删除..”。就像例子一样。此外，应该在默认值中检查“这应该被删除..”（在我的情况下，txtarea 的默认值不会相同）

【解决方案6】：

试试下面的 sn-p。第一次单击文本区域时，它会清空内容。

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

【讨论】：

用一堆文本填充文本区域，然后聚焦不同的元素，然后返回并再次聚焦文本区域只是看到所有输入的文本消失，这将是一种耻辱:-(跨度>
同意。我在将近 5 年前发布了这个:)

【解决方案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..');
        }
});

【讨论】：

正如对其他人所说，“这应该被删除..”应该在这应该被删除.. 所以它检查 textarea 中的默认值

【解决方案8】：

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

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

【讨论】：