textarea jQuery上的默认文本？

Posted 2023-04-14

技术标签:

【中文标题】textarea jQuery上的默认文本？【英文标题】：Default text on 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。 【参考方案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】：