Javascript 如何清除焦点上的文本区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3729828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I clear a textarea on focus?
提问by CLiown
Im using a simple form with a textarea, when the users clicks onto the textarea I want the contents of the textarea to be cleared.
我使用带有文本区域的简单表单，当用户单击文本区域时，我希望清除文本区域的内容。
Is this possible?
这可能吗？
回答by Jacob Relkin
$('textarea#someTextarea').focus(function() {
$(this).val('');
});
回答by kingjeffrey
If you only want to delete the default text (if it exists), try this:
如果您只想删除默认文本（如果存在），请尝试以下操作：
$("textarea").focus(function() {
if( $(this).val() == "Default Text" ) {
$(this).val("");
}
});
By testing for the default text, you will not clear user entered text if they return to the textarea.
通过测试默认文本，如果用户返回到 textarea，您将不会清除用户输入的文本。
If you want to reinsert the default text after they leave (if they do not input any text), do this:
如果您想在他们离开后重新插入默认文本（如果他们没有输入任何文本），请执行以下操作：
$("textarea").blur(function() {
if( $(this).val() == "" ) {
$(this).val("Default Text");
}
});
Of course, the above examples assume you begin with the following markup:
当然，上面的示例假设您从以下标记开始：
<textarea>Default Text</textarea>
If you want to use placeholder text semantically you can use the new HTML5 property:
如果你想在语义上使用占位符文本，你可以使用新的 HTML5 属性：
<textarea placeholder="Default Text"></textarea>
Although this will only be supported in capable browsers. But it has the added advantage of not submitting the placeholder text on form submission.
尽管这仅在功能强大的浏览器中受支持。但它有一个额外的优势，即不在表单提交时提交占位符文本。
回答by Peter Ajtai
My suggestion is that you only remove the initial default content on the first focus. On subsequent focuses, you risk removing user content. To achieve this, simply .unbind()the focus handler after the first click:
我的建议是您只删除第一个焦点上的初始默认内容。在随后的焦点上，您可能会冒着删除用户内容的风险。要实现这一点，只需在第一次单击后.unbind()焦点处理程序：
$("textarea").focus(function(event) {
// Erase text from inside textarea
$(this).text("");
// Disable text erase
$(this).unbind(event);
});
jsFiddle example
jsFiddle 示例
As a note, since you are using a textareawhich has open and closing tags, you can can use $(this).text("");or $(this).html("");... and, since the text inside a textareais its value you can also use $(this).val("");and $(this).attr("value", "");or even this.value = "";.
请注意，由于您使用的textarea是具有开始和结束标记的 a，您可以使用$(this).text("");or $(this).html("");... 并且由于 a 中的文本textarea是它的值，您也可以使用$(this).val("");and$(this).attr("value", "");甚至this.value = "";。
回答by Sebastien
HTML5 offers a more elegant solution to this problem: the "placeholder" attribute.
HTML5 为这个问题提供了一个更优雅的解决方案：“占位符”属性。
It'll create a text in background of your textarea which will appear only when the textarea is empty.
它将在您的 textarea 的背景中创建一个文本，该文本仅在 textarea 为空时才会出现。
<textarea placeholder="Enter some text !"></textarea>
回答by Wayne
There are a couple of issues here that are only partially addressed in the current answers:
这里有几个问题在当前的答案中只部分解决：
- You need to clear the text when the user focuses the field
- You only want to clear it the first time the user clicks on the field
- You do not want the user to be able to submit the default text before it's been cleared
- You might want to allow the user to submit the default text if they decide to type it back in. I have no idea why they'd want to do this, but if they insist on typing it back in, then I lean toward letting them do it.
- 当用户聚焦该字段时，您需要清除文本
- 您只想在用户第一次单击该字段时清除它
- 您不希望用户能够在清除之前提交默认文本
- 如果用户决定重新输入，您可能希望允许用户提交默认文本。我不知道他们为什么要这样做，但是如果他们坚持要重新输入，那么我倾向于让他们做吧。
With these details in mind, I'd add a class named "placeholder" to the field and use something like the following:
考虑到这些细节，我将向该字段添加一个名为“占位符”的类，并使用如下所示的内容：
$("form textarea.placeholder").focus(function(e) {
$(this).text("");
$(this).removeClass("placeholder");
$(this).unbind(e);
});
Validate that the "placeholder" class name was removed when the form is submitted to guarantee that the user really, reallywants to submit some stupid placeholder text.
验证当表单提交保证用户去除“占位符”类的名字真的，真的要提交一些愚蠢的占位符文本。
If you're using the jQuery Validation Plugin, then you can put it all together like this:
如果您使用的是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();
}
});
回答by álvaro González
jQuery(function($){
$("textarea").focus(function(){
$(this).val("");
});
});
回答by redwall_hp
Something like this?
像这样的东西？
$('textarea#myTextarea').focus(function() {
if ($(this).val() == 'default text') {
$(this).val('');
}
});
回答by clickandboom
<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>
回答by GuyFromOverThere
This is possible and i think you are going for a code that can do this for more textareas than one...
This is what i use for my site:
Javascript:
这是可能的，我认为您正在寻找一种可以为更多文本区域执行此操作的代码......
这就是我用于我的网站的代码：
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:
HTML：
<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>
回答by Chris Adams
I found that simply
我发现这很简单
$('#myForm textarea').val('');
clears the form in Chrome but this did not work for Firefox (6.x). The value was empty in Firebug but the previous text still showed in the textarea. To get around this I select and rebuild the textareas one at a time:
清除 Chrome 中的表单，但这对 Firefox (6.x) 不起作用。Firebug 中的值为空，但之前的文本仍显示在 textarea 中。为了解决这个问题，我一次选择并重建一个 textareas：
$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);
});
This finishes the job in Firefox and does not break Chrome. It will go through all of the textareas in a form one by one. Works in all other browsers (Opera, Safari, even IE).
这完成了 Firefox 中的工作并且不会破坏 Chrome。它将以一种形式一一遍历所有文本区域。适用于所有其他浏览器（Opera、Safari，甚至 IE）。
