如何清除焦点上的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();
    }
});

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）。