Javascript 单击时删除输入文本的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2984311/
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
Delete default value of an input text on click
提问by Wassim AZIRAR
I have an input text :
我有一个输入文本：
<input name="Email" type="text" id="Email" value="[email protected]" />
I want to put a default value like "What's your programming question ? be specific." in StackOverFlow, and when the user click on it the default value disapear.
我想设置一个默认值，比如“你的编程问题是什么？具体点。” 在 StackOverFlow 中，当用户点击它时，默认值消失。
回答by MvanGeest
For future reference, I haveto include the HTML5 way to do this.
为了将来参考，我必须包含 HTML5 方法来执行此操作。
<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What's your programming question ? be specific." />
If you have a HTML5 doctype and a HTML5-compliant browser, this will work. However, many browsers do not currently support this, so at least Internet Explorer users will not be able to see your placeholder. However, see http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/(archive.org version) for a solution. Using that, you'll be very modern and standards-compliant, while also providing the functionality to most users.
如果您有 HTML5 文档类型和符合 HTML5 的浏览器，这将起作用。但是，目前许多浏览器不支持此功能，因此至少 Internet Explorer 用户将无法看到您的占位符。然而，看到http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/（archive.org版）的解决方案。使用它，您将非常现代且符合标准，同时还为大多数用户提供功能。
Also, the provided link is a well-tested and well-developed solution, which should work out of the box.
此外，提供的链接是一个经过充分测试和完善的解决方案，它应该是开箱即用的。
回答by mqchen
EDIT: Although, this solution works, I would recommend you try MvanGeest's solution belowwhich uses the placeholder-attribute and a javascript fallback for browsers which don't support it yet.
编辑：虽然此解决方案有效，但我建议您尝试下面的 MvanGeest 解决方案，该解决方案使用placeholder-attribute 和 javascript 回退，用于尚不支持它的浏览器。
If you are looking for a Mootools equivalent to the JQuery fallback in MvanGeest's reply, here is one.
如果您在 MvanGeest 的回复中寻找相当于 JQuery 回退的 Mootools，这里是一个.
--
——
You should probably use onfocusand onblurevents in order to support keyboard users who tab through forms.
您可能应该使用onfocus和onblur事件来支持通过表单进行选项卡的键盘用户。
Here's an example:
下面是一个例子：
<input type="text" value="[email protected]" name="Email" id="Email"
onblur="if (this.value == '') {this.value = '[email protected]';}"
onfocus="if (this.value == '[email protected]') {this.value = '';}" />
回答by Jani
This is somewhat cleaner, i think. Note the usage of the "defaultValue" property of the input:
我认为这更干净一些。请注意输入的“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>
回答by cllpse
Using jQuery, you can do:
使用 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 = "";
});
});
And you could stuff all this into a custom plug-in, like so:
你可以把所有这些都塞进一个自定义插件中，像这样：
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 = "";
});
});
};
Here's how you would use the plug-in:
以下是您将如何使用该插件：
$("input:text").hideObtrusiveText();
Advantages to using this code is:
使用此代码的优点是：
- Its unobtrusive and doesn't pollute the DOM
- Code re-use: it works on multiple fields
- It figures out the default value of inputs by itself
- 不显眼，不污染DOM
- 代码重用：它适用于多个领域
- 它自己计算输入的默认值
Non-jQuery approach:
非 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;
};
}
回答by Myke
Enter the following
inside the tag, just add onFocus="value=''" so that your final code looks like this:
在标签中输入以下内容，只需添加 onFocus="value=''" 以便您的最终代码如下所示：
<input type="email" id="Email" onFocus="value=''">
This makes use of the javascript onFocus() event holder.
这利用了 javascript onFocus() 事件持有者。
回答by 072et
Just use a placeholdertag in your input instead of value
只需placeholder在输入中使用标签而不是value
回答by c-h-a-r-a-n
we can do it without using js in the following way using the "placeholder" attribute of html5 ( the default text disappears when the user starts to type in ,but not on just clicking )
我们可以使用html5的“占位符”属性通过以下方式在不使用js的情况下做到这一点（当用户开始输入时，默认文本消失，但不仅仅是点击）
<input type="email" id="email" placeholder="[email protected]">
<input type="email" id="email" placeholder="[email protected]">
see this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder
看到这个：http: //www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder
回答by kkk
<input name="Email" type="text" id="Email" placeholder="enter your question" />
<input name="Email" type="text" id="Email" placeholder="enter your question" />
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
placeholder 属性指定了一个简短的提示，用于描述输入字段的预期值（例如样本值或预期格式的简短描述）。
The short hint is displayed in the input field before the user enters a value.
在用户输入值之前，简短提示会显示在输入字段中。
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
注意：占位符属性适用于以下输入类型：文本、搜索、网址、电话、电子邮件和密码。
I think this will help.
我认为这会有所帮助。
回答by KingRider
Why remove value? its useful, but why not try CSS
为什么要删除值？它很有用，但为什么不试试 CSS
input[submit] {
font-size: 0 !important;
}
Value is important to check & validate ur PHP
值对于检查和验证您的 PHP 很重要
回答by ELO
Here is very simple javascript. It works fine for me :
这是非常简单的javascript。这对我来说可以 ：
// JavaScript:
function sFocus (field) {
if(field.value == 'Enter your search') {
field.value = '';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '') {
field.value = 'Enter your search';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}
// HTML
<form>
<label class="screen-reader-text" for="s">Search for</label>
<input
type="text"
class="lightinput"
onfocus="sFocus(this)"
onblur="sBlur(this)"
value="Enter your search" name="s" id="s"
/>
</form>
