Question

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

这可能吗？

Answer 1

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

Answer 2

如果您只想删除默认文本（如果存在），请尝试以下操作：

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

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

});

通过测试默认文本，如果用户输入的文本返回到textarea，则不会清除用户输入的文本。

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

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

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

});

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

<textarea>Default Text</textarea>

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

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

虽然这只能在功能强大的浏览器中支持。但它的另一个好处是不在表单提交上提交占位符文本。

Answer 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(""); < / strong> ...而且，由于textarea中的文字是其值，您还可以使用 $(this).val(""); 和 $(this).attr("value", ""); 甚至是this.value = "";。

Answer 4

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

它会在textarea的背景中创建一个文本，只有当textarea为空时才会出现。

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

Answer 5

此处有几个问题仅在当前答案中得到部分解决：

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

考虑到这些细节，我要添加一个名为＆＃34;占位符＆＃34;的类。到现场并使用以下内容：

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

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

如果您正在使用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();
    }
});

Answer 6

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

Answer 7

这样的东西？

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

Answer 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>

Answer 9

这是可能的，我认为你会找到一个代码，可以做更多textareas而不是一个... 这就是我用于我的网站的内容：
的使用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>

Answer 10

我发现只是

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

清除Chrome中的表单，但这对Firefox（6.x）无效。 Firebug中的值为空，但之前的文本仍显示在textarea中。为了解决这个问题，我一次选择并重建textareas：

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

这完成了Firefox中的工作并且不会破坏Chrome。它将以一个一个的形式通过所有textareas。适用于所有其他浏览器（Opera，Safari，甚至IE）。

如何清除焦点上的textarea？

10 个答案:

的 jsFiddle example