我怎样才能清除焦点上的textarea？

即时通讯使用一个简单的forms与textarea，当用户点击到textarea我想textarea的内容被清除。

这可能吗？

Answer 1

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

Answer 2

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

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

通过testing默认文本，如果返回到textarea，则不会清除用户input的文本。

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

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

当然，上面的例子假设你从下面的标记开始：

 <textarea>Default Text</textarea> 

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

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

尽pipe这只能在有能力的浏览器中支持。 但它具有不提交表单提交占位符文本的附加优势。

Answer 3

我的build议是，你只能删除第一个焦点上的初始默认内容。 在后续焦点上，您可能会删除用户内容。 为了实现这一点，只需在第一次点击之后简单地将.unbind（）焦点处理程序：

 $("textarea").focus(function(event) { // Erase text from inside textarea $(this).text(""); // Disable text erase $(this).unbind(event); }); 

jsFiddle的例子

---

请注意，由于您正在使用具有打开和closures标记的textarea ，因此您可以使用$(this).text(""); 或$(this).html(""); …因为textarea里面的textarea是它的值，所以你也可以使用$(this).val(""); 和$(this).attr("value", ""); 甚至this.value = ""; 。

Answer 4

这里有几个问题，目前的答案只能部分解决：

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

考虑到这些细节，我会在该字段中添加一个名为“placeholder”的类，并使用如下所示的内容：

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

在提交表单时validation“占位符”类名是否被删除，以确保用户确实想提交一些愚蠢的占位符文本。

如果你使用jQueryvalidation插件 ，那么你可以把它放在一起，像这样：

 $.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 5

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

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

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

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

我简单地发现

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

在Chrome中清除表单，但这不适用于Firefox（6.x）。 Firebug中的值为空，但之前的文本仍显示在textarea中。 为了解决这个问题，我一次select并重build一个textarea：

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

这完成了在Firefox的工作，并没有打破铬。 它将逐一通过所有的textareas。 适用于所有其他浏览器（Opera，Safari，甚至IE）。

Answer 10

这是可能的，我认为你是一个代码，可以做到这一点比一个更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>