如果在 jquery、输入字段中为空，则删除/添加 onfocus/onblur 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7377571/
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
Remove/add value onfocus/onblur if empty in jquery, input field
提问by Karem
I know there exists many questions about this, but I dont know what to search.
我知道这方面存在很多问题，但我不知道要搜索什么。
I have a email field, and I want it to have "Write your email here" and when you click/do onfocus it should disappear. Although if you did not write something and go onblur it should appear again.
我有一个电子邮件字段，我希望它具有“在此处写您的电子邮件”，当您单击/执行 onfocus 时，它应该会消失。虽然如果你没有写东西并继续模糊它应该会再次出现。
回答by Shef
1. Markup
1. 标记
<input id="email" name="email" type="text" value="Write your email here" />
2. jQuery
2. jQuery
$('#email')
.on('focus', function(){
var $this = $(this);
if($this.val() == 'Write your email here'){
$this.val('');
}
})
.on('blur', function(){
var $this = $(this);
if($this.val() == ''){
$this.val('Write your email here');
}
});?
3. Demo
3. 演示
回答by herkulano
You should use HTML5 placeholder instead and use a jquery plugin for older browsers
http://diveintohtml5.ep.io/forms.html
您应该改用 HTML5 占位符，并为旧版浏览器使用 jquery 插件
http://diveintohtml5.ep.io/forms.html
Running example here:
http://jsfiddle.net/AamkB/
在这里运行示例：http:
//jsfiddle.net/AamkB/
There are a lot of jquery plugins for placeholder, i used this one:
http://webcloud.se/code/jQuery-Placeholder/
占位符有很多 jquery 插件，我使用了这个：http:
//webcloud.se/code/jQuery-Placeholder/
回答by Jim van Aalst
You can use the inline JavaScript tags onblur / onfocus . Maybe not the most 'clean' HTML code but it certainly works in all browsers! (Didn't try IE5.5 / 6.0, but hey, who is using these oldies nowadays?! ^_^)
您可以使用内联 JavaScript 标签 onblur / onfocus 。也许不是最“干净”的 HTML 代码，但它肯定适用于所有浏览器！（没试过IE5.5/6.0，但是嘿，现在谁在用这些老东西？！^_^）
<input type="text" name="aSweetInputField" value="Your textfield value"
class="anyClass" onclick="if (this.defaultValue==this.value) this.value=''"
onblur="if (this.value=='') this.value=this.defaultValue">
That's it!
就是这样！
回答by ThiefMaster
You do not need any JS for that. Simply use placeholder="Write your email here."in the <input>tag.
你不需要任何 JS。只需placeholder="Write your email here."在<input>标签中使用。
If you need to support IE, add http://webcloud.se/code/jQuery-Placeholder/to make it work there, too.
如果您需要支持 IE，请添加http://webcloud.se/code/jQuery-Placeholder/使其在那里也能工作。
回答by MeLight
<input type="text"
onfocus="if($(this).val() == 'Write your email here') $(this).val('')" onblur="if($(this).val() == '') $(this).val('Write your email here')"
value="Write your email here">
There you go.
你去吧。
回答by Nasruddin Shaikh
This should work for Forms globally, just define values initially in the input's valueattribute.
这应该适用于全局表单，只需在输入的value属性中最初定义值。
<input type="text" name="example" value="example text">
<textarea name="exampleTextArea" value="example text in textarea">
var el = $('input[type=text], textarea');
el.focus(function(e) {
if (e.target.value == e.target.defaultValue)
e.target.value = '';
});
el.blur(function(e) {
if (e.target.value == '')
e.target.value = e.target.defaultValue;
});
