9

我有 INPUT 元素，我想重置以前的值（不需要原始值）。有2种方式：

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

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

4

4 回答 4

6

这是一个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>

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

于 2010-01-16T22:59:50.587 回答
2

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

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

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

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

于 2010-01-16T22:49:22.733 回答
2

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

无论如何，您所说的在 Escape 上重置的行为是 IE 的怪癖：在其他浏览器中，Escape 没有任何效果，即使在 IE 中也是不可靠的。具体来说，在正常表单中，一次 Escape 按下会丢失自上次焦点以来的更改，并且连续两次 Escape 按下会将整个表单重置为初始值。但是，如果表单中有一个<input type="reset">，单次 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);
});
于 2010-01-17T16:34:38.060 回答
2

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

// 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;
        }
    });
});
于 2014-05-14T17:47:27.523 回答