【问题标题】:Reset INPUT without FORM无 FORM 重置 INPUT
【发布时间】:2010-01-16 22:42:59
【问题描述】:

我有 INPUT 元素,我想重置以前的值(不需要原始值)。有两种方式:

  1. 将值保存在另一个变量中并再次将其拉出
  2. 按 ESC 键。但我不希望用户按 ESC 而是单击按钮。

那么对于#2,如何使用 jquery 创建 ESC 击键?

【问题讨论】:

  • 对于未来的观众 - 有一个名为 defaultValue 的默认 javascript 属性。您可以在单个元素上使用 input.value = input.defaultValue。当数据已经存在时,将数据保存在外部变量中是没有意义的。

标签: javascript jquery html keystroke


【解决方案1】:

这是SSCCE

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2079185</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(':input.remember').each(function() {
                    $(this).attr('data-remember', $(this).val());
                });
                $('button.reset').click(function() {
                    $(':input.remember').each(function() {
                        $(this).val($(this).attr('data-remember'));
                    });
                });
            });
        </script>
    </head>
    <body>
        <input type="text" class="remember" value="foo">
        <button class="reset">Reset</button>
    </body>
</html>

这基本上存储了 onload 期间每个带有 remember 类的输入元素的原始值,并指示带有 reset 类的按钮在单击时恢复它。

【讨论】:

  • +1 用于使用 attr 而不是数据。更清洁、更高效!
  • &lt;form&gt; 之外有一个&lt;input&gt; 是完全有效的。不打算提交的表单是正常的。唯一的缺点是单选按钮没有正确分组。
【解决方案2】:

当您仍在该字段内时,Esc 起作用。

单击按钮的那一刻,字段将失去焦点,值将存储在字段中,因此您无法通过默认浏览器过程撤消它..

您只能使用您提到的#1 选项..

在字段模糊(失去焦点时的事件)时,您应该存储该值,并且当您单击按钮时恢复为存储的值..

【讨论】:

    【解决方案3】:

    忘记生成诸如击键之类的事件。尽管您可以(以各种不可移植的方式)创建事件并将它们路由到事件处理系统中,但这只会导致调用适当的事件处理函数;它不会让浏览器为用户生成的操作(如击键或鼠标点击)执行默认操作。

    无论如何,您所说的在 Escape 上重置的行为是一个 IE 怪癖:在其他浏览器中,Escape 没有任何效果,即使在 IE 中也是不可靠的。具体来说,在正常表单中,一次 Escape 按下会丢失自上次焦点以来的更改,并且连续两次 Escape 按下会将整个表单重置为初始值。但是,如果表单中包含&lt;input type="reset"&gt;,则按一次 Escape 会重置表单并聚焦重置按钮。这使您更容易意外丢失您键入的所有内容,这也是不在表单中包含重置按钮的另一个好理由。

    因此,如果您想重置为初始值,您可以致电form.reset()。如果您只想重置一个字段,您可以设置input.value= input.defaultValue(或input.checked= input.defaultChecked 用于复选框/收音机,类似地defaultSelected 用于选项)。

    但是,如果您想要该字段上次聚焦时存在的值,因为 IE 在没有重置按钮时的行为,您将不得不做一些变量记忆,例如:

    var undonevalue= $('#undoable').val();
    $('#undoable').focus(function() {
        undonevalue= $('#undoable').val();
    });
    $('#undoer').click(function() {
        $('#undoable').val(undonevalue);
    });
    

    【讨论】:

    • 实际上这是正确/最佳的答案。感谢您的干净和详细的解释。你让我开心:) :)
    【解决方案4】:

    每个元素(输入、复选框、单选)都有一个包含默认值的属性,该元素被初始化。 此方案不适用于以前的值。

    // pseudocode
    input.defaultValue;
    radio.defaultChecked;
    checkbox.defaultChecked;
    

    通过按 ESC 键将默认值设置为输入:

    $(document).ready(function(){
        // reset by pressing ESC with focus on input
        $('input').keypress(function(e) {
            if (e.keyCode == 27) {
                this.value = this.defaultValue;
            }
        });
    });
    

    【讨论】:

    • option.defaultSelected 用于select 元素
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-12-18
    • 2020-04-23
    • 2015-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多