keydown with JavaScript

Question

I am not sure how to do 'keydown' with pure JavaScript.

Here's how I did it with jQuery, but is there a way to do the same thing with pure JS also ? I just wanna check if there is a way and to learn how to do it, as well as to see difference and length of code. Thank you.

$('body').on('keydown', function(e) {
    if (e.keyCode === 27) return false;
});

EDIT: It is used to disable "Esc" button!

Did you not search "keydown JavaScript" in your favorite search engine? — epascarello, Mar 12 '13 at 13:10
http://stackoverflow.com/questions/3036243/cancel-the-keydown-in-html — Andrea Ligios, Mar 12 '13 at 13:11
I did search indeed @epascarello. However none works. If I add alert or console log it works but if I wanna override something that has "close" on Esc press it wont work. Works with jQuery tho :/ — dvlden, Mar 12 '13 at 13:17
Have fun with the cross browser issues in pure javascript - you know you CAN look at the jQuery source code to see how it is done there also...just sayin as that is exactly what you appear to be asking. — Mark Schultheiss, Mar 12 '13 at 13:19

score 3 · Answer 1 · answered Mar 12 '13 at 13:13

3

I don't like setting the listeners as attributes, so I add even listeners like this:

var ele = document.getElementById('test');
ele.addEventListener('keydown', function() {
    //code
}, false);

answered Mar 12 '13 at 13:13

Jeff Shaver

3,315
18
19

IE8 and under do not support addEventListener – epascarello Mar 12 '13 at 13:21
Why I can't get any of answers to work ! They all work but on random thing that I put such as alert(); but not for overriding fancybox esc closure! :( – dvlden Mar 12 '13 at 13:30

Dreamwalker · Answer 2 · 2013-03-12T15:23:38.757

1

Here you go

document.body.onkeydown = function(e) {
    if (e.keyCode === 27) return false;
}

As you can see jQuery is shorter but this will execute less code

edited Mar 12 '13 at 15:23

answered Mar 12 '13 at 13:11

Dreamwalker

3,032
4
30
60

Manikandan Sethuraju · Answer 3 · 2013-03-12T14:34:56.497

0

Try this,

HTML

<body onkeydown="YourFunction(event)">...</body>

JS

function YourFunction(e)
{
     var unicode=e.keyCode || e.charCode|| e.which;
     if(unicode == 27)
        return false;
     else
     {
        //Your code...
     } 
}

edited Mar 12 '13 at 14:34

answered Mar 12 '13 at 13:15

Manikandan Sethuraju

2,873
10
29
48

IE does not pass in the event object. – epascarello Mar 12 '13 at 13:50
hmmm.. I'm using IE9.0. There it's working fine. and also i changed the Browser Mode as **IE7 & IE8**. There also this code working fine. – Manikandan Sethuraju Mar 12 '13 at 14:39

Ronnie · Answer 4 · 2013-03-12T13:25:47.420

0

In pure javascript it is done this way

document.body.onkeydown=function(e){
  key=e.keyCode || e.charCode|| e.which; //cross browser complications
  if(key===27){
    return false;
  }
}

Hope it helped, it is the same script as the JQuery one you provided

edited Mar 12 '13 at 13:25

answered Mar 12 '13 at 13:18

Ronnie

512
5
12

Updated and now, I it'll have a little better browser support, Not sure about IE though – Ronnie Mar 12 '13 at 13:26

keydown with JavaScript

4 Answers4