设置HTML文本输入框的"默认"值.单击ESC时还原该值

Question

当Web表单写入浏览器时,浏览器会记住文本INPUT框的初始值.即.当它像这样接收HTML时:

<input type="text" value="something">

浏览器会记住"某事"作为初始/默认值.当用户开始在其上键入时,然后点击ESC,浏览器将该字段恢复为初始值(如果当前最初为空,则为空白).

但是,在以编程方式创建文本输入框时,按ESC键似乎总是空白,即使我使用默认值创建它,如下所示:

$('<input type="text" value="something">')

浏览器不会将此计为默认值,并且在按ESC时不会恢复为默认值.所以我的问题是,有没有办法在代码中创建一个文本框,并以某种方式为其分配一个默认值,所以ESC键的工作方式就像浏览器在HTML文档中收到它一样？

Answer 1

您可能会查找placeholder在空白时在输入字段中显示灰色文本的属性.

来自Mozilla开发者网络:

向用户提示可以在控件中输入的内容.占位符文本不得包含回车符或换行符.当type属性的值为text,search,tel,url或email时,此属性适用; 否则会被忽略.

然而,由于它是一个相当"新"的标签(来自HTML5规范afaik),您可能希望进行浏览器测试,以确保您的目标受众使用此解决方案.
(如果不告诉他们升级浏览器'因为这个标签就像一个魅力; o))

最后一个迷你小提琴直接看到它:http://jsfiddle.net/LnU9t/

编辑:这是一个简单的jQuery解决方案,如果检测到转义击键,它也将清除输入字段:http://jsfiddle.net/3GLwE/

Answer 2

这种esc行为只是IE的顺便说一句.而不是使用jQuery使用好旧的JavaScript来创建元素,它的工作原理.

var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);

http://jsfiddle.net/gGrf9/

如果您想将此功能扩展到其他浏览器,那么我将使用jQuery的数据对象来存储默认值.然后在用户按下escape时设置它.

//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')); }
});