How to hit "Esc" key as well when clicking the type="reset" button?

user_1468253 0
Viewed 45

Is there a way to trigger the hitting of "Esc" key as well when clicking the <input type="reset"> button? ( For some reason, the existing function needs Esc to work properly. )

To be precise, the desired result is:

  1. Typing in the input field
  2. Click "Reset"
  3. Clear input + Hitting the "Esc" key

Here is the form created for example:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<form onsubmit="event.preventDefault(); myFunction();">
  <input type="text" id="quick-search" required="" />
  <input type="reset" id="reset-btn" value="Reset" />
</form>
<style>
  input#quick-search:not(:valid)~input#reset-btn {
    display: none;
  }
</style>
<script>
  $(document).keydown(function(e) {
    if (e.key === "Escape") {
      $("#reset-btn").click();
    }
  });
</script>

I know how to make "Esc" as clicking reset, but cannot find the answer to make clicking reset also comes with a hit on "Esc".

jquery javascript
2 Answers

    $(document).on('keyup', function(event) {
         if (event.key == "Escape") {
            $("#reset-btn").click();
         }
    });
 input#quick-search:not(:valid)~input#reset-btn {
        display: none;
      }
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<form onsubmit="event.preventDefault(); myFunction();">
  <input type="text" id="quick-search" required="" />
  <input type="reset" id="reset-btn" value="Reset" />
</form>

user_187716600
user_14682530
Related