html

How to Handle JavaScript Event Keycode 13

JavaScript is the most popular web programming language because of its ability to create dynamic and interactive web pages. While designing a webpage, a user may want to execute a function after a specific event has happened. This can be done by handling the particular event using the built-in “event” method. An event in Javascript can be any activity that happens in the system that the user is programming.

This article will provide the procedure for handling the JavaScript Event Keycode 13 using the following outline:

What is the JavaScript Event Keycode 13?

The JavaScript “Event KeyCode 13” is a particular event where the user presses down the “Enter” key on their keyboard. Every key on the keyboard has a default key code behind it. For instance, the key code for the space key is 32. Just like this, the key code for the “enter” or “return” key is 13.

How to Handle JavaScript Event Keycode 13?

To perform a certain function when the enter key is pressed, the developer would have to handle the event keycode 13. This can be done by matching the value of the keycode of the key pressed, to the number 13. If the comparison is true, then the user can assign a function to that condition.

The following demonstration provides a solution for handling the Javascript keycode 13. It will show the alert message if the enter key is pressed:

<html>

<body>

<p>Press the Enter Keyboard Key in the Below Input Field to Get an Alert Message:</p>

<input type="text" id="myInput">

<script>

    document.getElementById("myInput").onkeypress = function (event) {
      if (event.keyCode == 13) {
        alert(event.code + " " + event.keyCode);
      }
    }

</script>

</body>

</html>

The explanation of the above code is as follows:

  • An “<input>” tag is created with the id “myInput”. It is created so that the user can press the enter tags inside this input field.
  • Inside the “<script>” tags, the input element is provided with the “.onkeypress” event using the “document.getElementById()” method.
  • Upon pressing any key inside the input field, a function will execute that will provide the alert message will appear showing the key pressed and its code i.e. “Enter 13”. This will happen only if the “if” condition of “event.keyCode == 13” is true. This condition basically checks if the keycode of the event is equal to 13 or not.

Output:

From the below output, it is clear that no alert message shows if the user presses other keys. However, upon pressing the Enter key, the alert message will appear:

That is all about handling the JavaScript Event Keycode 13.

Conclusion

The JavaScript “Event KeyCode 13” is an event that occurs when the user presses down the “Enter” key on their keyboard. To handle javascript event keycode 13, match the “event.keyCode” with the number 13 and provide a function that will execute if this condition is true. This article has explained the procedure for handling the event keycode 13 in Javascript.

About the author

Shaheer Ahmad

I am a Technical Author and Software Engineer with a passion for translating complex concepts into accessible insights. I like to be deeply engaged in the world of technology and craft clear and engaging documentation that provides complex software solutions.