如何清除焦点上的文本区域?

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

如果只想删除默认文本(如果存在),请尝试以下操作:

$("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>

尽管这只在功能强大的浏览器中受支持。但它还有一个额外的优点,即在表单提交时不提交占位符文本。

我的建议是您只删除第一个焦点上的初始默认内容。在随后的焦点上,您有删除用户内容的风险。为了实现这一点, .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(""); …而且,由于文本 特克斯塔利亚 它的价值你也可以用 $(this).val(""); 和 $(this).attr("value", ""); 甚至 this.value = ""; .

HTML5为这个问题提供了一个更优雅的解决方案:“placeholder”属性。

它将在文本区域的背景中创建一个文本,只有当文本区域为空时才会显示该文本。

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

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

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

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

像这样?

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

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

我发现这很简单

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

清除Chrome中的表单,但这对Firefox(6.x)不起作用。Firebug中的值为空,但前一个文本仍显示在文本区域中。为了解决这个问题,我选择并一次重建一个文本区域:

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

这在Firefox中完成了任务,并且不会破坏Chrome。它将逐个遍历表单中的所有文本区域。适用于所有其他浏览器(Opera、Safari、甚至IE)。

这是可能的,我认为你需要一个代码,可以为更多的文本区域而不是一个…
这是我的网站使用的内容:
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>