textarea jQuery上的默认文本？答案

【问题标题】：Default text on textarea jQuery?textarea jQuery上的默认文本？
【发布时间】：2011-01-23 01:44:52
【问题描述】：

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

我已经在 Google 和这里搜索过，但我似乎只能找到与文本框和 NOT 文本区域相关的教程，而且我已经在文本区域上使用了一个类，所以不能依赖于它的类上班。

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

【问题讨论】：

当你说你“不能依赖类”时，这是否意味着你不能向文本区域添加任何类？
是的，因为我的 textarea 已经在使用一个类，所以不能向 textarea 添加另一个类。
您可以在给定的 html 元素上拥有任意数量的类。
当我这样做时，我得到一个验证错误：属性“类”的重复规范。我的类也设置了 textarea 的样式，并通过添加另一个类覆盖了设置 textarea 样式的类，因此我的 textarea 变成了没有样式的 textarea。
您没有多次指定class=。相反，您在属性内放置了一个以空格分隔的列表。例如，class="foo bar baz" 将具有三个类 foo、bar 和 baz。

标签： javascript jquery textarea default

【解决方案1】：

演示： http://jsfiddle.net/marcuswhybrow/eJP9C/2/

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

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

演示： http://jsfiddle.net/marcuswhybrow/eJP9C/2/

【讨论】：

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

【讨论】：

嗨，因为我的 textareas 已经使用了一个类，所以我无法向 textareas 添加另一个类，而且它使用了一个 id。如何更改该代码使其不依赖于类或 id？感谢您的帮助和代码。
感谢会在早上进行测试，因为我已经崩溃了。谢谢雅各布:)
这里还有一个问题，当我点击提交按钮时，blur() 检测到没有变化，textarea 被设置为默认字符串。我认为当你提交时，你应该恢复空字符串。当然，服务器可以测试default 字符串。但这违背了edited 标志的使用...

【解决方案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 上找到了该解决方案，但我还没有看到它做得更好

【讨论】：

它实际上是我见过的对新手最友好的代码

【解决方案4】：

我已经在 Google 和此处搜索过，但是我似乎只能找到教程关于文本框

在文本框上使用的任何东西也可以在 jQuery 中的文本区域上使用。 val() 方法检测所使用的控件，并将 value 属性用于输入，将内部文本用于 textarea

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

【讨论】：

【解决方案5】：

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

http://davidwalsh.name/html5-placeholder

这可能并非所有浏览器都支持，尤其是旧的 IE。

【讨论】：