How do I check if a specific key was released on keyboard?

Question

I want to check whether the escape key has been pressed/released in javascript.

They way I've seen is this :

document.addEventListener('keyup', function(event) {
   //returns a number for key  
  console.log(event.keyCode);   
});

However when I went onto Mozilla it says the '.keyCode' is being deprecated use '.key' instead. Which I did but when I changed the code to this:

document.addEventListener('keyup', function(event) {
   //returns a number for key  
  console.log(event.key);   
});

It wouldn't work it said in the console 'undefined'. Any ideas why?

Also is Mozilla the best place to go, because as a beginner I'm finding it difficult to understand. Thanks

Possible duplicate of [How to find out what character key is pressed?](http://stackoverflow.com/questions/1846599/how-to-find-out-what-character-key-is-pressed) — Jonathan.Brink, May 24 '16 at 17:17
I have always used .keyCode. Your event object doesn't have a .key property, that is why it is logging undefined in the console. — IrkenInvader, May 24 '16 at 17:20
@IrkenInvader sorry I'm a beginner what do you mean by doesn't have a key property? thanks — troy beckett, May 24 '16 at 17:23
@Jonathan.Brink is mine a duplicate if all the answers on the link you posted use .keycode when it says on Mozilla this is deprecated — troy beckett, May 24 '16 at 17:28
`event.key` is [widely supported](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Browser_compatibility), on which browser you're testing? — Teemu, May 24 '16 at 17:32
@IrkenInvader very true makes sense. So do I not pay attention to https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode — troy beckett, May 24 '16 at 17:33
I'm confused...ev.key is undefined in chrome for this fiddle, right? https://jsfiddle.net/4dwpcLb8/ — IrkenInvader, May 24 '16 at 17:36
Looks like `event.key` was just added to the latest Chrome, it's available from version 51 on. — Teemu, May 24 '16 at 17:43
I think you should. MDN is probably the best knowledge source for these things you can find. — Teemu, May 24 '16 at 17:52
@teemu this is where it says deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode — troy beckett, May 24 '16 at 17:53
Yes, the article says "This feature has been removed from the Web standards." Browser developers schedule their changes differently. As stated earlier, Chrome has implemented the replacing feature from version 51 on. — Teemu, May 24 '16 at 18:10

score 0 · Answer 1 · answered May 24 '16 at 17:23

0

The problem is you're adding your listener to document when it should be added to window. E.g.,

window.addEventListener('keyup', function(ev) {
    console.log(ev.key);
});

answered May 24 '16 at 17:23

Willy

1,055
8
23

score 0 · Answer 2 · answered May 24 '16 at 17:25

You need to attach the event listener to the window. This may differ by browser, but it worked for me.

 window.addEventListener("keyup", function (event) {
    
      if(event.key === "Escape"){
         console.log("Escape was released.");
      }
    
      // Consume the event for suppressing "double action".
      event.preventDefault();
    }, true);

Try it on CodePen!

How do I check if a specific key was released on keyboard?

2 Answers2