Javascript Onclick 事件以删除文本输入字段中的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10637900/
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
Onclick event to remove default value in a text input field
提问by RSM
I have an input field:
我有一个输入字段：
<input name="Name" value="Enter Your Name">
How would I get it to remove the pre-defined text (Enter Your Name) when the user clicks the box.
当用户单击该框时，我如何让它删除预定义的文本（输入您的姓名）。
As far as I am aware Javascript is the best way to do this. If that wrong please inform me.
据我所知，Javascript 是最好的方法。如果有错请告知。
回答by Sampson
HTML5 Placeholder Attribute
HTML5 占位符属性
You are likely wanting placeholderfunctionality:
您可能需要以下placeholder功能：
<input name="Name" placeholder="Enter Your Name" />
Polyfill for Older Browsers
旧浏览器的 Polyfill
This will not work in some older browsers, but polyfills exist(some require jQuery, others don't) to patch that functionality.
这在一些较旧的浏览器中不起作用，但存在 polyfill（有些需要 jQuery，有些不需要）来修补该功能。
"Screw it, I'll do it myself."
“去吧，我自己来。”
If you wanted to roll your own solution, you could use the onfocusand onblurevents of your element to determine what its value should be:
如果您想推出自己的解决方案，您可以使用元素的onfocus和onblur事件来确定它的值应该是什么：
<input name="Name" value="Enter Your Name"
onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter Your Name')" />
Avoid Mixing HTML with JavaScript
避免将 HTML 与 JavaScript 混合使用
You'll find that most of us aren't big fans of evaluating JavaScript from attributes like onblurand onfocus. Instead, it's more commonly encouraged to bind this logic up purely with JavaScript. Granted, it's a bit more verbose, but it keeps a nice separation between your logic and your markup:
您会发现我们大多数人都不太喜欢从onblur和 等属性评估 JavaScript onfocus。相反，更普遍的做法是鼓励将此逻辑纯粹与 JavaScript 绑定。当然，它有点冗长，但它在您的逻辑和标记之间保持了很好的分离：
var nameElement = document.forms.myForm.Name;
function nameFocus( e ) {
var element = e.target || window.event.srcElement;
if (element.value == "Enter Your Name") element.value = "";
}
function nameBlur( e ) {
var element = e.target || window.event.srcElement;
if (element.value == "") element.value = "Enter Your Name";
}
if ( nameElement.addEventListener ) {
nameElement.addEventListener("focus", nameFocus, false);
nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
nameElement.attachEvent("onfocus", nameFocus);
nameElement.attachEvent("onblur", nameBlur);
}
回答by d4rkpr1nc3
This is the right, cross-browser way to do it :
这是正确的跨浏览器方式：
<input type="text" value="Enter Your Name" onfocus="if(this.value == 'Enter Your Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Your Name'; } " />
回答by Raunak
Use onclick="this.value=''":
使用onclick="this.value=''"：
<input name="Name" value="Enter Your Name" onclick="this.value=''">
回答by kalisjoshua
As stated before I even saw this question placeholderis the answer. HTML5 for the win! But for those poor unfortunate souls that cannot rely on that functionality take a look at the jquery plugin as an augmentation as well. HTML5 Placeholder jQuery Plugin
如前所述，我什至看到这个问题placeholder就是答案。HTML5 为胜利！但是对于那些不能依赖该功能的可怜的不幸的灵魂，也可以将 jquery 插件视为增强功能。HTML5 占位符 jQuery 插件
<input name="Name" placeholder="Enter Your Name">
回答by Geekm3
u can use placeholder and when u write a text on the search box placeholder will hidden. Thanks
您可以使用占位符，当您在搜索框上写文本时，占位符将隐藏。谢谢
<input placeholder="Search" type="text" />
回答by M Rostami
<input name="Name" value="Enter Your Name" onfocus="freez(this)" onblur="freez(this)">
function freez(obj)
{
if(obj.value=='')
{
obj.value='Enter Your Name';
}else if(obj.value=='Enter Your Name')
{
obj.value='';
}
}
回答by Ange Loron
In addition to placeholder="your text"you could also do onclick="this.value='';
除了placeholder="your text"你还可以做onclick="this.value='';
So it would look something like:
所以它看起来像：
<input name="Name" value="Enter Your Name" onclick="this.value='';>
回答by vimist
This should do it:
这应该这样做：
HTML
HTML
<input name="Name" value="Enter Your Name" onClick="blankDefault('Enter Your Name', this)">
JavaScript
JavaScript
function blankDefault(_text, _this) {
if(_text == _this.value)
_this.value = '';
}
There are better/less obtrusive ways though, but this will get the job done.
虽然有更好/不那么突兀的方法，但这将完成工作。
回答by Pascal Boutin
You actually want to show a placeholder, HTML 5 offer this feature and it's very sweet !
您实际上想要显示一个占位符，HTML 5 提供了这个功能，而且非常棒！
Try this out :
试试这个：
<input name="Name" placeholder="Enter Your Name">
