如何清除焦点上的文本区域？
Posted
技术标签:
【中文标题】如何清除焦点上的文本区域？【英文标题】：How can I clear a textarea on focus? 【发布时间】：2011-04-13 09:22:11 【问题描述】：我使用带有 textarea 的简单表单，当用户单击 textarea 时，我希望清除 textarea 的内容。
这可能吗？
【问题讨论】：
您确定不想只删除默认文本吗？以我的经验，这些行为可能真的很侵入性...... 使用帮助文本的值有许多可用性缺陷：用户可能无意中提交它，浏览器可能会覆盖它，用户可能在脚本运行之前开始输入等等。方法是在输入字段上放置标签，这比设置值要复杂一些，但幸运的是有一堆插件（例如labelify）为您完成了困难的部分。 【参考方案1】：$('textarea#someTextarea').focus(function()
$(this).val('');
);
【讨论】：
【参考方案2】：如果你只想删除默认文本（如果存在的话），试试这个：
$("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>
虽然这仅在支持的浏览器中受支持。但它还有一个额外的优势，即在表单提交时不提交占位符文本。
【讨论】：
text() 无法按预期工作，请改用val()（此处的示例不适用于text()，但可以使用val()
谢谢spaus。我已经更新了使用新版本 jQuery 的答案（根据您的建议）。
对于像我这样走得太快的人，第二个 sn-p 必须在第一个之后添加。第一个是“焦点”部分，第二个是“模糊”部分:)
我完全赞成删除默认文本，但由于某种原因，这里的字符串比较器和“最佳答案”对我不起作用。由于某种原因，默认字符串实际上并不等于 $(this).val()。如果你遇到这种情况，试试这个：if($('#textbody').val().indexOf("This is default text.") > -1) $(this).val(''); 【参考方案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("");...而且，由于 textarea 中的文本是它的值，因此您还可以使用 $(this).val(""); 和 $(this).attr("value", ""); 甚至 this.value = "";。
【讨论】：
我认为这是一个比接受的解决方案更合适的解决方案。谢谢【参考方案4】：HTML5 为这个问题提供了一个更优雅的解决方案：“占位符”属性。
它将在您的文本区域的背景中创建一个文本，该文本仅在文本区域为空时才会出现。
<textarea placeholder="Enter some text !"></textarea>
【讨论】：
【参考方案5】：这里有几个问题仅在当前答案中部分解决：
-
您需要在用户聚焦字段时清除文本
您只想在用户第一次点击该字段时清除它
您不希望用户能够在默认文本被清除之前提交它
如果用户决定重新输入默认文本，您可能希望允许他们提交默认文本。我不知道他们为什么要这样做，但如果他们坚持重新输入，那么我倾向于让他们去做。
考虑到这些细节，我将在字段中添加一个名为“占位符”的类并使用如下内容：
$("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();
);
【讨论】：
【参考方案6】：jQuery(function($)
$("textarea").focus(function()
$(this).val("");
);
);
【讨论】：
【参考方案7】：这样的？
$('textarea#myTextarea').focus(function()
if ($(this).val() == 'default text')
$(this).val('');
);
【讨论】：
【参考方案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>
【讨论】：
【参考方案9】：我发现很简单
$('#myForm textarea').val('');
清除 Chrome 中的表单，但这不适用于 Firefox (6.x)。在 Firebug 中该值为空，但之前的文本仍显示在 textarea 中。为了解决这个问题，我一次选择并重建一个文本区域：
$('#' + formId + ' textarea').each(function(i)
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);
);
这完成了 Firefox 中的工作并且不会破坏 Chrome。它将以一种形式逐一遍历所有文本区域。适用于所有其他浏览器（Opera、Safari 甚至 IE）。
【讨论】：
【参考方案10】：这是可能的，我认为您正在寻找一种可以为更多文本区域执行此操作的代码... 这是我用于我的网站的内容：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>
【讨论】：
以上是关于如何清除焦点上的文本区域？的主要内容，如果未能解决你的问题，请参考以下文章