Javascript 单击时如何清除文本区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2783604/
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 to clear textarea on click?
提问by Karem
Given a <textarea>with a default value as follows:
给定一个<textarea>默认值，如下所示：
<textarea>Please describe why</textarea>
How do you clear the default value when the user clicks to edit the field?
当用户单击编辑字段时如何清除默认值？
回答by Dolph
Your JavaScript:
你的 JavaScript：
function clearContents(element) {
element.value = '';
}
And your HTML:
还有你的 HTML：
<textarea onfocus="clearContents(this);">Please describe why</textarea>
I assume you'll want to make this a little more robust, so as to not wipe user input when focusing a second time. Herearefiverelateddiscussions& articles.
我假设您想让它更强大一些，以便在第二次聚焦时不会擦除用户输入。这里有五篇相关的讨论和文章。
And here's the (much better) ideathat David Dorward refers to in comments above:
这是 David Dorward 在上面的评论中提到的（更好的）想法：
<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>
回答by Gigazelle
You can use the placeholder attribute introduced in HTML5:
您可以使用 HTML5 中引入的 placeholder 属性：
<textarea placeholder="Please describe why"></textarea>
This will place your filler text in grey that will disappear automatically when a user clicks on the text field. Additionally, it will reappear if it loses focus and the text area is blank.
这会将您的填充文本置于灰色，当用户单击文本字段时，该文本将自动消失。此外，如果它失去焦点并且文本区域为空白，它将重新出现。
回答by emcee22
This is your javascript file:
这是您的 javascript 文件：
function yourFunction(){
document.getElementById('yourid').value = "";
};
This is the html file:
这是 html 文件：
<textarea id="yourid" >
Your text inside the textarea
</textarea>
<button onClick="yourFunction();">
Your button Name
</button>
回答by Paul Kearney - pk
Try:
尝试：
<input name="mytextbox" onfocus="if (this.value=='Please describe why') this.value = ''" type="text" value="Please Describe why">
回答by tildy
Did you mean like this for textfield?
你的意思是这样的文本字段？
<input type="text" onblur="if(this.value == '') this.value='SEARCH';" onfocus="if(this.value == 'SEARCH') this.value='';" size="15" value="SEARCH" name="xSearch" id="xSearch">
Or this for textarea?
或者这个用于textarea？
<textarea id="usermsg" rows="2" cols="70" onfocus="if(this.value == 'enter your text here') this.value='';" onblur="if(this.value == '') this.value='enter your text here';" >enter your text here</textarea>
回答by nmsdvid
The best solution what I know so far:
迄今为止我所知道的最佳解决方案：
<textarea name="message" onblur="if (this.value == '') {this.value = 'text here';}" onfocus="if (this.value == 'text here') {this.value = '';}">text here</textarea>
回答by Heart
<textarea name="post" id="post" onclick="if(this.value == 'Write Something here..............') this.value='';" onblur="if(this.value == '') this.value='Write Something here..............';" >Write Something here..............</textarea>
回答by WillyMilimo
jQuery attribute val() should do the job.
You can do $('#YourTextareaID').click(function(e) { e.target.value = ''; }).
jQuery 属性 val() 应该可以完成这项工作。你可以做到$('#YourTextareaID').click(function(e) { e.target.value = ''; })。
回答by user2967131
You may try this code,
你可以试试这个代码，
<textarea name="textarea" cols="70" rows="2" class="searchBox" id="textarea" onfocus="if(this.value == 'Please describe why') this.value='';" onblur="if(this.value == '') this.value='Please describe why';">Please describe why</textarea>
回答by Matt
Here's a solution if you have dynamic data coming in from a database...
The 'data' variable represents database data.
If there is no data saved yet, the placeholder will show instead.
Once the user starts typing, the placeholder will disappear and they can then enter text.
Hope this helps someone!
如果您有来自数据库的动态数据，这里有一个解决方案......
“数据”变量代表数据库数据。
如果尚未保存数据，则将显示占位符。
一旦用户开始输入，占位符将消失，然后他们可以输入文本。
希望这可以帮助某人！
// If data is NOT saved in the database
if (data == "") {
var desc_text = "";
var placeholder = "Please describe why";
// If data IS saved in the database
} else {
var desc_text = data;
var placeholder = "";
}
<textarea placeholder="'+placeholder+'">'+desc_text+'</textarea>
