设置 HTML 文本输入框的“默认”值。单击 ESC 时恢复值

Posted 2023-03-05

【中文标题】设置 HTML 文本输入框的“默认”值。单击 ESC 时恢复值

【英文标题】：Setting an HTML text input box's "default" value. Revert the value when clicking ESC

【发布时间】：2012-02-14 18:21:24

【问题描述】：

当向浏览器写入 Web 表单时，浏览器会记住文本 INPUT 框的初始值。 IE。当它收到这样的 html 时：

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

浏览器将“某物”记住为初始/默认值。当用户开始在上面输入内容，然后按 ESC 键时，浏览器会将字段恢复为初始值（当然，如果最初为空白，则为空白）。

但是，当以编程方式创建文本输入框时，按 ESC 似乎总是使该框空白，即使我使用这样的默认值创建它：

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

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

【参考方案1】：

如果问题是：“是否可以在 ESC 上增加价值”，那么答案是肯定的。你可以做这样的事情。例如使用 jQuery，它看起来像下面。

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

$(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();
        
    );
);

工作源可以在这里找到：http://jsfiddle.net/S3N5H/1/

如果您的意思不同，请告诉我，我可以稍后调整代码。

【讨论】：

谢谢，我知道它可以用一些脚本来完成，但我希望浏览器本身支持的元素属性作为默认值 - 而不是在脚本中手动复制它.但是，mrtsherman 似乎是对的，而且它是一个仅限 IE 的东西，所以 - 我猜是脚本。 :)

【参考方案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 的数据对象来存储默认值。然后在用户按下退出键时设置它。

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

【讨论】：

Yoshi 回答中的 PlaceHolder 属性现已广泛使用。我会使用这种方法与这种 javascript 方法。当我在 2012 年最初回答这个问题时，IE8 和 IE9 仍在广泛使用，不支持占位符。

【参考方案3】：

您可能会寻找placeholder 属性，该属性会在输入字段为空时显示灰色文本。

来自Mozilla Developer Network:

提示用户可以在控件中输入的内容。这 占位符文本不得包含回车符或换行符。这 当 type 属性的值为文本时，属性适用， 搜索、电话、网址或电子邮件；否则将被忽略。

但是，由于它是一个相当“新”的标签（来自 HTML5 规范 afaik），您可能需要进行浏览器测试，以确保您的目标受众对此解决方案感到满意。 （如果不告诉他们升级浏览器，因为这个标签就像一个魅力;o））

最后是一个迷你小提琴，可以直接看到它的实际效果：http://jsfiddle.net/LnU9t/

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

【讨论】：

由于没有人为此提供示例，因此在 HTML 输入中添加：

谢谢，这可能很有用，但是我需要一些面向大众的东西（即向后兼容），即使它是一种 javascript 方法。

@ingredient_15939 对于怪物延迟，我很抱歉，但我添加了另一个不在占位符标签上的小提琴。为方便起见，我使用了数据占位符，但也可以定义一个 JS 变量。

【参考方案4】：

查看文本输入的 defaultValue 属性，当您通过单击 <input type="reset"/> 按钮 (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp ) 重置表单时也会使用它

顺便说一句，defaultValue 和占位符文本是不同的概念，你需要看看哪一个更适合你的需求