当前位置：文江博客话题详情

重置输入而不使用表格

发布于 2024-08-18 06:57:38 字数 159 浏览 2 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总攻大人 2024-08-25 06:57:39

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

无论如何，您所讨论的在 Escape 上重置的行为是 IE 的怪癖：在其他浏览器中 Escape 没有任何效果，甚至在 IE 中它也是不可靠的。具体来说，在正常表单中，按一次 Escape 会丢失自上次焦点以来的更改，连续按两次 Escape 会将整个表单重置为初始值。但是，如果表单中包含，则按一下 Escape 即可重置表单并聚焦重置按钮。这使得您更容易意外丢失您输入的所有内容，并且这是不在表单中包含重置按钮的另一个充分理由。

因此，如果您想重置为初始值，可以调用form.reset()。如果您只想重置一个字段，可以设置 input.value= input.defaultValue （或为复选框/单选框设置 input.checked= input.defaultChecked，类似地 < code>defaultSelected 选项）。

但是，如果您想要该字段上次获得焦点时存在的值（就像 IE 在没有重置按钮时的行为一样），您将必须执行一些变量记忆操作，例如：

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

Forget about generating events like keystrokes. Though you can (in various non-portable ways) create events and route them into the event handling system, this will only cause the appropriate event handler functions to be called; it will not make the browser perform the default actions for a user-generated action like a keystroke or mouse click.

In any case, the behaviour you are talking about with resetting on Escape is an IE quirk: in no other browser does Escape have any effect, and even in IE it's unreliable. Specifically, in a normal form, one Escape press loses changes since the last focus, and two Escape presses in a row resets the entire form to initial values. However, if the form has an <input type="reset"> in it, a single Escape press resets the form and focuses the reset button. This makes it even easier to accidentally lose everything you've typed and is another good reason not to include a reset button in your forms.

So, if you want to reset to the initial values, you can call form.reset(). If you want to reset just one field, you can set input.value= input.defaultValue (or input.checked= input.defaultChecked for checkboxes/radios, and similarly defaultSelected on options).

If, however, you want the value that was present at the time the field was last focused, as IE behaves when there is no reset button, you will have to do some variable-remembering, eg.:

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

回复收藏 0 原文

温柔少女心 2024-08-25 06:57:39

每个元素（输入、复选框、单选）都有一个属性，其中包含元素初始化时使用的默认值。
此场景不适用于以前的值。

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

Each element (input, checkbox, radio) has an attribute which contains the default value, the element was inititalized with.
This scenario works not for previous values.

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

To set the default value to an input by pressing the ESC key:

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

回复收藏 0 原文

软糯酥胸 2024-08-25 06:57:38

这是一个 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 类的按钮在单击时恢复它。

Here's an 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>

This basically stores the original value of every input element with a class of remember during onload and instructs the button with a class of reset to restore it whenever clicked.

回复收藏 0 原文