如何清除焦点上的textarea？

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例子

作为一个说明,因为你使用的是textarea它具有开放和关闭标签,你可以可以使用$(this).text("");或$(this).html("");...而且,因为里面的文本textarea是它的价值,你也可以使用$(this).val("");和$(this).attr("value", "");甚至this.value = "";.

Answer 4

HTML5为这个问题提供了更优雅的解决方案:"占位符"属性.

它将在textarea的背景中创建一个文本,该文本仅在textarea为空时出现.

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

Answer 5

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

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

考虑到这些细节,我将在字段中添加一个名为"placeholder"的类,并使用如下内容:

$("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();
    }
});