如何清除焦点上的文本区域？答案

【问题标题】：How can I clear a textarea on focus?如何清除焦点上的文本区域？
【发布时间】：2011-04-13 09:22:11
【问题描述】：

我使用带有 textarea 的简单表单，当用户单击 textarea 时，我希望清除 textarea 的内容。

这可能吗？

【问题讨论】：

您确定不想只删除默认文本吗？以我的经验，这些行为可能真的很侵入性......
使用帮助文本的值有许多可用性缺陷：用户可能无意中提交它，浏览器可能会覆盖它，用户可能在脚本运行之前开始输入等等。方法是在输入字段上放置标签，这比设置值要复杂一些，但幸运的是有一堆插件（例如labelify）为您完成了困难的部分。

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你只想删除默认文本（如果存在的话），试试这个：

$("textarea").focus(function() {

    if( $(this).val() == "Default Text" ) {
        $(this).val("");
    }

});

通过测试默认文本，如果用户返回文本区域，您将不会清除用户输入的文本。

如果您想在他们离开后重新插入默认文本（如果他们没有输入任何文本），请执行以下操作：

$("textarea").blur(function() {

    if( $(this).val() == "" ) {
        $(this).val("Default Text");
    }

});

当然，以上示例假设您从以下标记开始：

<textarea>Default Text</textarea>

如果你想在语义上使用占位符文本，你可以使用新的 HTML5 属性：

<textarea placeholder="Default Text"></textarea>

虽然这仅在支持的浏览器中受支持。但它还有一个额外的优势，即在表单提交时不提交占位符文本。

【讨论】：

text() 无法按预期工作，请改用val()（此处的示例不适用于text()，但可以使用val()
谢谢spaus。我已经更新了使用新版本 jQuery 的答案（根据您的建议）。
对于像我这样走得太快的人，第二个 sn-p 必须在第一个之后添加。第一个是“焦点”部分，第二个是“模糊”部分:)
我完全赞成删除默认文本，但由于某种原因，这里的字符串比较器和“最佳答案”对我不起作用。由于某种原因，默认字符串实际上并不等于 $(this).val()。如果你遇到这种情况，试试这个：if($('#textbody').val().indexOf("This is default text.") > -1){ $(this).val(''); }

【解决方案3】：

我的建议是你只删除第一个焦点上的初始默认内容。在后续关注中，您可能会删除用户内容。要实现这一点，只需.unbind()第一次点击后的焦点处理程序：

$("textarea").focus(function(event) {

      // Erase text from inside textarea
    $(this).text("");

      // Disable text erase
    $(this).unbind(event);
});

jsFiddle example

请注意，由于您使用的 textarea 具有打开和关闭标签，因此您可以使用 $(this).text(""); 或 $(this).html("");...而且，由于 textarea 中的文本是它的值，因此您还可以使用 $(this).val(""); 和 $(this).attr("value", ""); 甚至 this.value = "";。

【讨论】：

我认为这是一个比接受的解决方案更合适的解决方案。谢谢

【解决方案4】：

HTML5 为这个问题提供了一个更优雅的解决方案：“占位符”属性。

它将在您的文本区域的背景中创建一个文本，该文本仅在文本区域为空时才会出现。

<textarea placeholder="Enter some text !"></textarea>

【讨论】：

【解决方案5】：

这里有几个问题仅在当前答案中部分解决：

您需要在用户聚焦字段时清除文本
您只想在用户第一次点击该字段时清除它
您不希望用户能够在默认文本被清除之前提交它
如果用户决定重新输入默认文本，您可能希望允许他们提交默认文本。我不知道他们为什么要这样做，但如果他们坚持重新输入，那么我倾向于让他们去做。

考虑到这些细节，我将在字段中添加一个名为“占位符”的类并使用如下内容：

$("form textarea.placeholder").focus(function(e) {
    $(this).text("");
    $(this).removeClass("placeholder");
    $(this).unbind(e);
});

验证在提交表单时删除了“占位符”类名，以保证用户真的，真的想要提交一些愚蠢的占位符文本。

如果您使用的是jQuery Validation Plugin，那么您可以像这样将它们放在一起：

$.validator.addMethod("isCustom", function(value, element) {
    return !$(element).hasClass("placeholder");
});

$(form).validate({
    rules: {
        message: {
            required: true,
            isCustom: true
        }
    },
    messages: {
        message: "Message required, fool!"
    },
    submitHandler: function(form) {
        $(form).find(":submit").attr("disabled", "disabled");   
        form.submit();
    }
});

【讨论】：

【解决方案6】：

jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});

【讨论】：

【解决方案7】：

这样的？

$('textarea#myTextarea').focus(function() {
   if ($(this).val() == 'default text') {
      $(this).val('');
   }
});

【讨论】：

【解决方案8】：

<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}"  onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>

【讨论】：

【解决方案9】：

我发现很简单

$('#myForm textarea').val('');

清除 Chrome 中的表单，但这不适用于 Firefox (6.x)。在 Firebug 中该值为空，但之前的文本仍显示在 textarea 中。为了解决这个问题，我一次选择并重建一个文本区域：

$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);   
});

这完成了 Firefox 中的工作并且不会破坏 Chrome。它将以一种形式逐一遍历所有文本区域。适用于所有其他浏览器（Opera、Safari 甚至 IE）。

【讨论】：

【解决方案10】：

这是可能的，我认为您正在寻找一种可以为更多文本区域执行此操作的代码...
这是我用于我的网站的内容：
Javascript：

<script type='text/javascript'>
function RemoveText(NameEle)
{
    if ($('#' + NameEle) == 'default')
    {
        $('#' + NameEle).val('');
        $('#' + NameEle).text('');
        $('#' + NameEle).html('');
    }
}
function AddText(NameEle)
{
    if ($('#' + NameEle) == '')
    {
        $('#' + NameEle).val('default');
        $('#' + NameEle).text('default');
        $('#' + NameEle).html('default');
    }
}
</script>

HTML：

<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>

【讨论】：