Question

我有一个textarea，我想在页面加载时显示一些默认文本。单击textarea后，我希望文本消失，如果用户在textarea中单击并且没有输入任何内容然后单击textarea，则默认文本将再次显示。

我搜索了谷歌并在这里，但我似乎只能找到与文本框和 NOT textareas相关的教程，而且我已经在textarea上使用了一个类，所以不能依赖于它的类工作。

有没有人想要与我分享一些简单的jQuery代码来做我想要的事情？

Answer 1

DEMO： http://jsfiddle.net/marcuswhybrow/eJP9C/2/

重要的是要记住用户键入默认值的边缘情况。我的解决方案通过使用jQuery的textarea方法为每个edited标data()标记来避免这种情况。

HTML

正常情况下定义textarea的默认值：

<textarea>This is the default text</textarea>

jQuery

$('textarea').each(function() {
    // Stores the default value for each textarea within each textarea
    $.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});

DEMO： http://jsfiddle.net/marcuswhybrow/eJP9C/2/

Answer 2

足够简单：

$(function() {
  $('textarea.autoDefault').focus(function() {
     if($(this).val() === $(this).data('default') && !$(this).data('edited')) {
        $(this).val('');   
     }
  }).change(function() {
     $(this).data('edited', this.value.length > 0);
  }).blur(function() {
     if($(this).val().length === 0) {
        $(this).val($(this).data('default'));
     }
  }).blur(); //fire blur event initially
});

HTML标记：

<textarea class="autoDefault" rows="10" cols="25" data-default="some default text"></textarea>

jsFiddle example

Answer 3

"style='color:#888;' onfocus='inputFocus(this)' onblur='inputBlur(this)'"

^将其添加到HTML元素

function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}

^将其添加到您的document.ready功能

我刚才在SO上找到了这个解决方案而我还没有看到它做得更好

Answer 4

我搜索了谷歌，但在这里我似乎只能找到教程与文本框有关的

在文本框中使用的任何内容也可以在jQuery中的textarea上使用。 val（）方法检测使用的控件，并将使用value属性作为textarea的输入和内部文本

选择其中任何一个链接并实施

Answer 5

另一种方法是使用HTML5的占位符标记。

http://davidwalsh.name/html5-placeholder

在所有浏览器中都可能不支持这种情况，尤其是旧的IE。

textarea jQuery上的默认文本？

5 个答案:

HTML

jQuery

jsFiddle example