Reset INPUT without FORM_问答_开发者_运维开发者技术经验分享

I have INPUT element and I want to reset the previous value (not necessary original value). There are 2 ways:

Save the value in another variable and pull it out again
Press ESC key. But I don't want开发者_StackOverflow中文版 users to press ESC but click a button.

So for #2, how can I create a ESC keystroke using jquery?

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.

Esc works when you are still inside the field.

The moment you click the button, the field will lose focus and the value will be stored in the field, so you cannot undo it through the default browser procedure ..

You can only use the #1 option you mention ..

On blur of the field (the event when you lose focus) you should store the value, and when you click the button revert to the stored one..

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

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