设置 HTML 文本输入框的“默认”值。单击 ESC 时恢复值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8937113/
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
Setting an HTML text input box's "default" value. Revert the value when clicking ESC
提问by ingredient_15939
When a web form is written to the browser, the browsers remembers what the initial values are of a text INPUT box. ie. when it receives HTML like this:
当 Web 表单写入浏览器时，浏览器会记住文本 INPUT 框的初始值。IE。当它收到这样的 HTML 时：
<input type="text" value="something">
The browser remembers "something" as the initial/default value. When the user starts typing over it, then hits ESC, the browser reverts the field to the initial value (or blank if it was initially blank of course).
浏览器会记住“某物”作为初始/默认值。当用户开始在它上面打字，然后按 ESC 时，浏览器会将字段恢复为初始值（当然，如果最初为空白，则为空白）。
However, when creating a text input box programatically, hitting ESC always seems to blank the box, even if I create it with a default value like so:
但是，当以编程方式创建文本输入框时，即使我使用默认值创建它，按 ESC 似乎总是会清空该框，如下所示：
$('<input type="text" value="something">')
The browser doesn't count this as a default value and doesn't revert to it when hitting ESC. So my question is, is there a way to create a text box in code and somehow assign it a default value, so the ESC key works as if the browser received it in the HTML document?
浏览器不会将此视为默认值，并且在按 ESC 时不会恢复为默认值。所以我的问题是，有没有办法在代码中创建一个文本框并以某种方式为它分配一个默认值，这样 ESC 键就好像浏览器在 HTML 文档中收到它一样工作？
采纳答案by mrtsherman
This escbehavior is IE only by the way. Instead of using jQuery use good old javascript for creating the element and it works.
esc顺便说一下，这种行为是 IE 的。而不是使用 jQuery 使用好的旧 javascript 来创建元素并且它可以工作。
var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);
If you want to extend this functionality to other browsers then I would use jQuery's data object to store the default. Then set it when user presses escape.
如果您想将此功能扩展到其他浏览器，那么我将使用 jQuery 的数据对象来存储默认值。然后在用户按下转义键时设置它。
//store default value for all elements on page. set new default on blur
$('input').each( function() {
$(this).data('default', $(this).val());
$(this).blur( function() { $(this).data('default', $(this).val()); });
});
$('input').keyup( function(e) {
if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});
回答by nuala
You might looking for the placeholderattribute which will display a grey text in the input field while empty.
您可能会寻找placeholder在输入字段为空时显示灰色文本的属性。
From Mozilla Developer Network:
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
向用户提示可在控件中输入的内容。占位符文本不得包含回车或换行符。当 type 属性的值为 text、search、tel、url 或 email 时，该属性适用；否则将被忽略。
However as it's a fairly 'new' tag (from the HTML5 specification afaik) you might want to to browser testing to make sure your target audience is fine with this solution.
(If not tell tell them to upgrade browser 'cause this tag works like a charm ;o) )
但是，由于它是一个相当“新”的标签（来自 HTML5 规范 afaik），您可能需要进行浏览器测试以确保您的目标受众对这个解决方案满意。
（如果不告诉他们升级浏览器，因为这个标签就像一个魅力;o））
And finally a mini-fiddle to see it directly in action: http://jsfiddle.net/LnU9t/
最后是一个小小提琴，可以直接看到它的实际效果：http: //jsfiddle.net/LnU9t/
Edit: Here is a plain jQuery solution which will also clear the input field if an escape keystroke is detected: http://jsfiddle.net/3GLwE/
编辑：这是一个普通的 jQuery 解决方案，如果检测到转义按键，它也将清除输入字段：http: //jsfiddle.net/3GLwE/
回答by Marek Tuchalski
If the question is: "Is it possible to add value on ESC" than the answer is yes. You can do something like that. For example with use of jQuery it would look like below.
如果问题是：“是否可以在 ESC 上增加价值”，那么答案是肯定的。你可以做类似的事情。例如使用 jQuery，它看起来像下面这样。
HTML
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<input type="text" value="default!" id="myInput" />
JavaScript
JavaScript
$(document).ready(function (){
$('#myInput').keyup(function(event) {
// 27 is key code of ESC
if (event.keyCode == 27) {
$('#myInput').val('default!');
// Loose focus on input field
$('#myInput').blur();
}
});
});
Working source can be found here: http://jsfiddle.net/S3N5H/1/
工作源可以在这里找到：http: //jsfiddle.net/S3N5H/1/
Please let me know if you meant something different, I can adjust the code later.
如果您的意思不同，请告诉我，我稍后可以调整代码。
回答by Andreas Andreou
See the defaultValue property of a text input, it's also used when you reset the form by clicking an <input type="reset"/>button (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp)
查看文本输入的 defaultValue 属性，当您通过单击<input type="reset"/>按钮重置表单时也会使用它( http://www.w3schools.com/jsref/prop_text_defaultvalue.asp)
btw, defaultValue and placeholder text are different concepts, you need to see which one better fits your needs
顺便说一句，defaultValue 和占位符文本是不同的概念，您需要看看哪个更适合您的需求
