How to detect keycode / key pressed in jquery

MoreOnFew
Posted underjQuery

Tracking a keyCode can be very helpful if you would like to give your visitors a user-friendly experience. For instance, if there is an overlay open on a page, I usually press the ESC (Escape) button to close the overlay and most of the sites nowadays respond to it and close the overlay. It wouldn’t work without the keyCode being tracked. We do not have events like “onEscKeyPressed”, “onEnterKeyPressed” etc, so the only way to handle this type of functionality is by tracking the keyCode of the key pressed.

KeyCode is the Unicode value of a character key pressed.

How to identify the keyCode / the key pressed using jQuery ?

You can use jQuery’s event.which to identify the key pressed. It basically normalizes the event.keyCode and the event.charCode for keyboard key input. Hence it would be advisable to use event.which unless you really want to use event.keyCode. Let’s look at few examples to understand the use of event.which .

How to close an overlay on Esc / Escape key press?

The KeyCode for the Esc or Escape key is 27. You can find out the keyCode of a key by putting an alert on your page or by using this tool. The following example hides a div with ID “overlay” when the ESC key is pressed.

$(document).ready(function(){

	$(document).keydown(function(event){
			if(event.which == 27){
				$("#overlay").hide();
			}
	});

});

Similarly, we can use the keyCode to limit the type of characters allowed inside a particular field. For instance, let’s say that we have an input field that should contain only numbers and we don’t want the user to enter anything inside the field other than integers/numbers. In such a scenario we can use the event.which API to detect the keyCode and restrict the input.

How to restrict keyboard character input to digits?

The following example restricts the keyboard character input to digits.

$(document).ready(function(){
  $("input").keydown(function(event){ 

       //KeyCode for digits 0-9 is 96 to 105 on the numeric pad.
       //KeyCode for digits 0-9 is 48 to 57 on the regular digit keys on a qwerty keyboard.
       //keyCode 8 is for backspace

	if((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105) || (event.which == 8))
	{
		return true;
	}else{
		return false;
	}

  });
});

Identifying the key pressed using keyCode / character Code is helpful and it also improves the user experience for the end-user. You can do a lot of creative stuff by detecting the key pressed.

Happy Coding!

TaggedcharCodeEscape KeyjQuerykeyCodeKeypress


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew