How do I add event to press 'Esc'?

Question

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

let input = document.getElementById('input');
    //add event listener to keydown event    
    input.addEventListener('keydown',(e)=> {
        console.log(e.key);
      //check the key is 'Escape'
        if( e.key === 'Escape') {
            input.select();} 
        });

when I press 'Esc', it didn't work it only blur, don't select what I type in the input element. Where did I make mistake?

Possible duplicate of [How to handle ESC keydown on javascript popup window](https://stackoverflow.com/questions/1481626/how-to-handle-esc-keydown-on-javascript-popup-window) — ProllyGeek, Dec 13 '18 at 05:34

score 0 · Answer 1 · answered Dec 13 '18 at 06:13

for pure js

   document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert('Esc key pressed.');
    }
};

for jquery

jQuery(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       alert('Esc key pressed.');
    }
});

score -1 · Accepted Answer · answered Dec 13 '18 at 05:40

-1

Your code is running fine. Check it on JS Bin.

answered Dec 13 '18 at 05:40

Devesh

170
11

@jackpetton the codepen link you given works on both chrome and firefox – Nishant Solanki Dec 13 '18 at 05:50
Jack, you should use a different browser and try. Its working fine for me in codepen. – Devesh Dec 13 '18 at 05:51
@NishantSolanki why it doesn't work in my computer? – jack petton Dec 13 '18 at 05:51
@DeveshN. there are many ways to increase the reputation. please refer this link https://meta.stackexchange.com/questions/17204/six-simple-tips-to-get-stack-overflow-reputation-fast – Nishant Solanki Dec 13 '18 at 05:51
@jackpetton which computer and browser are you using? and also what does `console.log(e.key)` shows in the console? – Nishant Solanki Dec 13 '18 at 05:53
@NishantSolanki Chrome 70.0.3538.110 and It works in my safari – jack petton Dec 13 '18 at 05:55
and when I open a private window of chrome ,It work all! – jack petton Dec 13 '18 at 06:01
can you rename the id of input to something else.. i.e. `` – Nishant Solanki Dec 13 '18 at 06:13

How do I add event to press 'Esc'?

2 Answers2