我有一个输入文本：
<input name="Email" type="text" id="Email" value="email@abc.com" />
我想设置一个默认值，比如“你的编程问题是什么？具体点。” 在 StackOverFlow 中，当用户点击它时，默认值消失。
单击时删除输入文本的默认值
IT技术
javascript
html
input
default-value
2021-03-10 18:21:45
6个回答
为了将来参考，我必须包含 HTML5 方法来执行此操作。
<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="What's your programming question ? be specific." />
如果您有 HTML5 文档类型和符合 HTML5 的浏览器，这将起作用。但是，目前许多浏览器不支持此功能，因此至少 Internet Explorer 用户将无法看到您的占位符。然而，看到http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ （archive.org版）的解决方案。使用它，您将非常现代且符合标准，同时还为大多数用户提供功能。
此外，提供的链接是一个经过充分测试和完善的解决方案，它应该是开箱即用的。
编辑：虽然此解决方案有效，但我建议您尝试下面的 MvanGeest 解决方案，该解决方案使用placeholder-attribute 和 javascript 回退，用于尚不支持它的浏览器。
如果您在 MvanGeest 的回复中寻找相当于 JQuery 回退的 Mootools，这里是一个.
——
您可能应该使用onfocus和onblur事件来支持通过表单进行选项卡的键盘用户。
下面是一个例子：
<input type="text" value="email@abc.com" name="Email" id="Email"
onblur="if (this.value == '') {this.value = 'email@abc.com';}"
onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />
我认为这更干净一些。请注意输入的“defaultValue”属性的用法：
<script>
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>
使用 jQuery，您可以执行以下操作：
$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});
你可以把所有这些都塞进一个自定义插件中，像这样：
jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};
以下是您将如何使用该插件：
$("input:text").hideObtrusiveText();
使用此代码的优点是：
- 不显眼，不污染DOM
- 代码重用：它适用于多个领域
- 它自己计算输入的默认值
非 jQuery 方法：
function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}
在标签中输入以下内容，只需添加 onFocus="value=''" 以便您的最终代码如下所示：
<input type="email" id="Email" onFocus="value=''">
这利用了 javascript onFocus() 事件持有者。