JavaScript trigger enter key press | Example code

Use keyCode property of the KeyboardEvent helps to track the keypress on the keyboard. It will catch and enter the key and trigger button.

Trigger Button Click on Enter Key Press using JavaScript

HTML example code.

Get the element of the input field. Execute the keyup function with addEventListener when the user releases a key. If keyCode is 13, trigger button element with click() event and popup alert box.

<!DOCTYPE html>
<html>
<body>
  <form>
    <input id="myInput" placeholder="Some text.." value="">
    <input type="submit" id="myBtn" value="Submit" onclick="hello()">
  </form>

  <script>
    var input = document.getElementById("myInput");
    input.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("myBtn").click();
      }
    });

    function hello() {
      alert("Hello");
    }
  </script>
</body>
</html>

Output:

JavaScript trigger enter key press

Q: How to trigger an enter keypress event after a certain action is executed?

Answer:

  1. Create a variable that tells us if the user has clicked your button. var clicked = false;
  2. Add an event listener to your button, the user clicks on it, the clicked variable will become true. myButton.addEventListener('click', function(){ clicked = true; });
  3. Add a keypress event listener: document.addEventListener('keypress', function(e) { // `e` is the event });
  4. check if the user clicked previously if(clicked) { // ... }
  5. If pressed key is keycode is 13. var keynum = e.keyCode||e.which; if(keynum == 13) { // ... }
  6. If the pressed key was enter, use clicked = false;
  7. After it will call function f after 2 seconds. setTimeout(f, 2000);
<!DOCTYPE html>
<html>
<body>
  <button id="btn">Click me, and then press enter.</button>

  <script>
    var clicked = false;
    document.querySelector('#btn').addEventListener('click', function(){
      clicked = true;
      console.log("You clicked the button. `clicked` is now `true`");
    });

    document.addEventListener('keypress', function(e) {
      if(clicked) {
        var keynum = e.keyCode || e.which;
        if(keynum == 13) {
          clicked = false; 
          console.log("`clicked` is now `false`. Waiting 2 seconds...");
          setTimeout(f, 2000);
        }
      }
    });

    function f() {
      console.log("Function `f` executed successfully!");
    }
  </script>
</body>
</html>

Source: stackoverflow.com

Output:

trigger an enter keypress event after a certain action is executed

JavaScript enter event listener code

document.querySelector('#txtSearch').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      // code for enter
    }
});

Do comment if you have any doubts and suggestions on this JS Enter key code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.