9

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

  1. Save the value in another variable and pull it out again
  2. Press ESC key. But I don't want users to press ESC but click a button.

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

1
  • For future viewers - there is a default javascript property called defaultValue. You could use input.value = input.defaultValue on individual elements. There is no point saving data in an external variable when it's already there.
    – Shadow
    Jul 22, 2013 at 1:50

4 Answers 4

6

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.

2
  • +1 for using attr instead of data. Cleaner and more efficient!
    – Ariel
    Jan 17, 2010 at 5:42
  • 1
    It is perfectly valid to have an <input> outside a <form>. It's normal for forms that aren't intended to be submitted. The only drawback is that radio buttons don't get properly grouped.
    – bobince
    Jan 17, 2010 at 16:06
2

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..

2

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);
});
1
  • Actually this is the RIGHT/BEST answer. Thanks for the clean and detailed explanation. You made my day :) :)
    – Omar Abid
    Aug 24, 2010 at 11:18
2

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;
        }
    });
});
1
  • Use option.defaultSelected for select elements Oct 25, 2021 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.