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

jQuery: textarea default value disppear on click

提问by Karem

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?

我想要一个带有一些默认文本的 textarea。当用户在 textarea 中单击时，应删除默认文本。如何使 textarea 的值在单击时消失？

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

我想要它完全像这样，http://www.webune.com/forums/20101025cgtc.html

But I wish it made in jQuery.

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

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

回答by ScottE

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

回答by Igor Pavelek

You can accomplish this even without JavaScript by using placeholderattribute.

即使没有 JavaScript，您也可以通过使用placeholder属性来完成此操作。

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

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

回答by ?ime Vidas

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/

现场演示：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/

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

回答by Jake Wilson

Very simple non-jQuery-dependent solution:

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

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

回答by Voooza

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

回答by AK M

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

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

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

回答by Mihai Tudor

And if someone wants to do this trick on a ajax loaded textareas you can achieve this with the .live()event ;)

如果有人想在 ajax 加载的 textareas 上做这个技巧，你可以通过.live()事件实现这一点；)

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

回答by tvanfosson

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