KeyboardEvent Value (keyCodes, MetaKey, Etc) - CSS-Tricks
When a KeyboardEvent fires, you can test which key was pressed because that event contains information you can write logic against.
document.addEventListener("keydown", function(event) { console.log(event.which); })For example, by pressing a, you’ll get 65. Apparently it’s best to write logic against which, as keyCode and charCode are complicated:
The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
And:
In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g. ‘a’), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the Shift key is held down). Otherwise, the code of the pressed key is stored in keyCode.
Tester Tool
Keycode values
Here’s a table that contains the values from event.which.
|
|
|
Zell Liew noticed that 3 of these keycodes were different in Firefox than the rest of the browsers
- ; is 59 in Firefox but 186 in other browsers.
- = is 61 in Firefox but 187 in other browsers.
- - is 173 in Firefox but 189 in other browsers.
These keycode values are only valid during in keydown and keyup events. On Mac, keypress events give you an completely different set of codes. For example:
| Key | event.which in keydown | event.which in keypress |
| a | 65 | 97 |
| b | 66 | 98 |
| c | 67 | 99 |
Comments
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Copy and paste this code: micuno *
Từ khóa » Bảng Keycode
-
Key Code Table - ForeUI
-
[Javascript] yCode 코드값 - Lael's World
-
JavaScript Key Code Event Tool & List | Toptal®
-
yCode - Web APIs - MDN Web Docs
-
Key Code Table (키 값 코드표) - Pianist
-
Keycode Constants | Microsoft Docs
-
Virtual-Key Codes (Winuser.h) - Win32 Apps | Microsoft Docs
-
Appendix B. Keyboard Key Code Values
-
Mã Keycode Trên Bàn Phím
-
JavaScript Keycode List – Keypress Event Key Codes For Enter ...
-
JQuery Keycode | KeyCodes Table And Examples Of JQuery Keycode
-
Javascript Char Codes (Key Codes) - Cambia Research
-
Key Code Reference Table - L2J With DuraBoys
It is recommended by jQuery to use e.which over e.keyCode, as it gets normalised across all browsers.
It also takes into account mouseup and mousedown.
Not trying to be funny, just trying to help!!
http://api.jquery.com/event.which/
ReplyBy mouseus, I clearly meant mouseup!
I agree with this, I stopped using e.keyCode along time ago when I found out e.which was more widely supported.
What about JQuery Hotkeys plugin? https://github.com/tzuryby/jquery.hotkeys
Great tip Chris, thanks for sharing !
I never figured it is that simple to know keyCodes with jQuery.
ReplyHere is a decent article (a little out of date) about keycode support and the events that trigger. I am not affiliated with the link at all, just something I came across the other day and it happens to work here as well. http://unixpapa.com/js/key.html
ReplyDang, im still using this:
var code = (e.keyCode ? e.keyCode : e.which); ReplyI still use that and always will until every browser uses the same property! Which will most likely never happen so I’d keep using it! I mean half these morons on here saying “Never knew it was that easy with jQuery” they must not know jQuery is a library of JavaScript -_- old developers will always out due all these newcomers, “jQuery” programmers. They make me laugh!
var code = e.keyCode || e.which; //is a shorter/cleaner version of what you have
@spyter: just know that if e.keyCode === 0, then it will be falsey and fall through to e.which (which may not be a problem, but is a possibility)
hahahah very smart
I found that the Apple command key is 224, which is not on this list.
Replyonly on firefox in chrome it is 93
sorry meant 91
The left command key is 91 and the right command key 93. So in your code please check for both.
i want alt+q =keycode??
ReplyTo detect that you’d need to look at the altKey value:
if (event.altKey && event.which === 81) { // alt-q being used }i want alt+g =keycode??
@chriscoyier The table seems to be missing “space” with a event.which value of 32 :)
ReplyWhat about the key codes for other languages?
ReplyJust found out that, for event.which, only in FF, backspace is 8, and the arrow keys are 0. In Chrome, it doesn’t set a value for either.
ReplyYou are using element.onkeypress, to get the arrow keys you use element.onkeydown .
Thank you for exact copy paste and don’t read even once ! I mean: ‘close braket’ just for fun ;)
ReplyPlease also add these: NUM_LOCK_MAC: 12, F13: 124, F14: 125, F15: 126, F16: 127, F17: 128, F18: 129, F19: 130,
ReplyI wanting alt+q = keycode?
ReplyThere are some conflicting keycodes which belong to two characters when using keyup or keydown: 188 , < 190 . > 191 / ? 192 ` ~ 219 [ { 220 \ | 221 ] } 222 ‘ “
ReplyI have tried following but not working
var DisableArrowKeys = function(e){ if(e.keyCode == 40){ return false; } if(e.keyCode == 39){ return false; } return true; } $("#id").bind("keyup change", DisableArrowKeys); $("#id").bind("keydown change", DisableArrowKeys); Replythis will help you i think
google transliteration Api use, but keypress use . but i have not code for keypress,please give help google api with keypress use
71: g
the alt+g: 18: alt have a alt at down and g at down.
How do you determine a capital letter from a lower-case letter?
ReplyYou cannot tell the difference between capitals and lower case as keycode handles the key being pressed so to it there is no difference between a capital and lower case same as there is no difference between 0 and ).
The keyCode will return a different value while typing in a capital letter, but only during the "keypress" event!
Try out this demo and you’ll see that "keyup" and "keydown" always returns the capital letter keyCode and "keypress" will return the lower-case letter value.
Firefox 15+ returns 173 instead of 189 for dash. jQuery’s event.which does not normalize this. Previous versions returned 109.
ReplyThis list is quite good, also pointing out inconsistencies: http://www.javascripter.net/faq/keycodes.htm
186, 187 and 189 from the above list are not safe to use.
ReplyA robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies.
http://jaywcjlove.github.io/hotkeys/
hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){ switch(handler.key){ case "ctrl+a":alert('you pressed ctrl+a!');break; case "ctrl+b":alert('you pressed ctrl+b!');break; case "r":alert('you pressed r!');break; case "f":alert('you pressed f!');break; } });hotkeys understands the following modifiers: ⇧, shift, option, ⌥, alt, ctrl, control, command, and ⌘.
The following special keys can be used for shortcuts: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete and f1 through f19.
ReplyThank god! Great article been searching for it finally now i can identify the Keyboard codes with “KeyCode” method :) Good Job
ReplyGreat post
ReplyHello dear people, I mod games but I still haven’t found out what to put in an INI file for the keybinding of Arrow Up and Arrow Down. If someone can help me I would be happy to hear from you. Sven
ReplyYou can easily check JavaScript KeyboardEvent properties (e.key, e.code, e.which, e.keyCode… and more) with Key.js: https://keyjs.dev
These are probably the most relevant ones for navigation in games:
Arrow Up: 38 Arrow Left: 37 Arrow Down: 40 Arrow Right: 39 Numpad Up: 104 Numpad Left: 100 Numpad Down: 98 Numpad Right: 102 W: 87 A: 65 S: 83 D: 68
ThecharCode, keyCode and which are being deprecated. They will soon be replaced by event.key which will return named keys:
document.querySelector('input').addEventListener('keydown', function(event) { console.log(event.key); });So If you type in “Hello World”, this will end up in the console:
Shift H e l l o Shift W o r l dThe event.shiftKey will still be true for shifted characters, but there is a new method to check for modifier keys (shift, alt, altGr, ctlr, capsLock, meta, OS, etc.) named getModifierState:
document.querySelector('input').addEventListener('keydown', function(event) { console.log(event.getModifierState()); });Which will return values like this:
Shift Alt AltGraph Control CapsLock Meta OS ReplyIs there a reason the lowest keycode is 8, or is that just how it is for no reason what so ever.
ReplykeyCodes are based on the ascii table.
In Codepen shared in the article, event.which is not respecting the case, always gives me 65 when i press lowercase “a” or uppercase “A”. am I understand something wrong here?
ReplyThe codes within a keypress event will provide the proper ASCII character equivalents of the typed character. Try this demo.
Note that the keypress does not contain a value for some special keys, like the arrows, insert, delete, home, pageUp/Down, etc.
I wanting ctrlKey+c = keycode?
y try these :
only: function(event) {
if( event.ctrlKey && event.which === 86) { event.preventDefault(); } }but dont go :( … do you have another idea :)
THX
ReplyHow to get the Ctrl+space event?
ReplyAny one know when press 1 then the input box displays I(Uppercase of I(i))
Reply@chriscoyier This post will need to be updated soon… most browsers now support the new keyboard events, including getModifierState().
http://codepen.io/Mottie/pen/bgZxod/
ReplyI get inconsistent evt.which values when listening to keydown on Safari 9, expecially for symbols like +, -, etc..
I get reasonable values (ascii values) if I listen to keypress.
I need to stick with keydown for non-character keys like arrows.
Furthermore keypress is annoying if you don’t want the event being triggered multiple times if the user holds the key down.
ReplyHi
I need some help in JS code whenever I type any alphabetic word e.g. a or b then I want result 1 + 2 = 3? Is it possible, please help in this regards
ReplyIs there a way to write code that works the same on WINDOWS and MAC returns.
e.which has different returns:
Greetings. How would I do Ctrl + D on button click on most browsers? Something like this: “Favorites
ReplyHey how could i put numbers and get it to the point lets say i have a calculator i could type numbers instead of pressing them
ReplyI could be wrong, but it looks like e.key is now the recommended approach with the widest support.
ReplyNow which, charCode and keyCode are deprecated.
Replythe Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account
https://www.clickercounter.org/spacebar-clicker
ReplyThe other day I was trying to think of how to put numbers and get the point across. Imagine I have a calculator and instead of pressing the buttons on the calculator, I can simply type the numbers instead.
ReplyGreat post! Just wanted to add that the KeyboardEvent value for entry type 86 represents a specific key event. Understanding these values can really help with advanced event handling in your apps!
ReplyHow do you properly detect key combinations with modifiers (e.g., Ctrl+Space or Alt+G) while accounting for differences between event.which, event.keyCode, and modern alternatives like event.key? Should you rely on getModifierState() for this, or are there more cross-browser approaches?
Reply