How to Detect Escape Key Press with Pure Js or Jquery?

As a JavaScript developer, you may come across situations where you need to detect when the escape key is pressed by the user. Whether you want to close a modal, cancel an action, or perform any other task, detecting the escape key press is essential. In this blog post, we will explore two solutions to detect the escape key press using pure JavaScript and jQuery.

Pure JavaScript Solution

To detect the escape key press using pure JavaScript, you can utilize the keydown event and check if the keyCode property is equal to the value of the escape key, which is 27.

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    // Your code to handle the escape key press goes here
    console.log('Escape key pressed!');
  }
});

In the above code snippet, we attach an event listener to the keydown event of the document. Inside the event handler function, we check if the keyCode property of the event object is equal to 27, which represents the escape key. If the condition is true, you can perform any desired action.

jQuery Solution

If you are using jQuery in your project, detecting the escape key press becomes even simpler. jQuery provides a convenient method called keyup() that you can use to listen for key events, including the escape key.

$(document).keyup(function(event) {
  if (event.keyCode === 27) {
    // Your code to handle the escape key press goes here
    console.log('Escape key pressed!');
  }
});

In the above code snippet, we attach the keyup() event handler to the document using jQuery. Inside the event handler function, we check if the keyCode property of the event object is equal to 27, which represents the escape key. If the condition is true, you can perform any desired action.

Now that you have learned how to detect the escape key press using pure JavaScript and jQuery, you can apply this knowledge to enhance the user experience in your JavaScript projects. Remember to choose the solution that best fits your project’s requirements.

Happy coding!