event.keycode vs event.which

Question

I fell foul of a Firefox keydown behavior in that pressing the enter key (indeed any key) without having focus on a specific field will NOT trigger a keydown event it will only trigger a `keypress event.

This could be very confusing as the keydown and keyup event use JavaScript key codes whereas keypress uses ASCII codes. Fortunately 13 (enter/return) is common to both.

Is there any known reason why Firefox using keypress in this circumstance? What is the benefit?

Once this was established IE8 threw up a silly in that it does not permit preventDefault demanding instead returnValue = false the following snippet from another Stack Overflow post has proved very useful:

event.preventDefault ? event.preventDefault() : event.returnValue = false;

During the search to resolve these issues I have been consistently confused by event.keycode vs event.which. Namely am I doing wrong using a switch statement similar to:

$("#class_Name").bind("keydown", function(event){
    // do not test input if field controls used
    switch(event.which){
       case 13:
       //enter key 
       event.preventDefault ? event.preventDefault() : event.returnValue = false;
       break;
     }

Is the following better, if so why?

$("body").keypress(function(event){
     // stop inadvertant form submission
     if (event.keycode == "13"){
       event.preventDefault ? event.preventDefault() : event.returnValue = false;
     }
});

I would just like to know so that I know which is best to apply.

You do know that jQuery normalizes the differences between browsers? In jQuery, `event.which` is expected to be consistent across browsers. Also, jQuery's `event.preventDefsult();` will also work in OldIE. — Rob W, Aug 29 '12 at 07:19
@Rob W, Hi Rob yes indeed I was aware of this. The online jquery documentation documents the use of event.which which I have used. Many posts show herein use keycode not which. Hence the question. I understand that event.preventDefsult(); should work everywhere. — codepuppy, Aug 30 '12 at 14:32
Wondering if we can get an update on this for relevant browsers in 2016? — Faust, Nov 03 '16 at 22:54

score 11 · Accepted Answer · answered Aug 29 '12 at 07:20

11

Some browsers use keyCode and others use which. But with jQuery this is normalized so you don't have to think about that. You can just choose the one you prefer.

answered Aug 29 '12 at 07:20

sQVe

1,977
12
16

3

only for the case that the event was generated by jquery itself. Catching a native events and normalizing them is not possible – Toskan Sep 26 '12 at 14:05

score 9 · Answer 2 · edited May 23 '17 at 12:25

9

According to this comment jQuery can be unreliable and this page says:

event.which is undefined in IE<9 on keydown and keyup.

event.keyCode is 0 in Gecko (Seamonkey, Firefox) on keypress for keys that return a character.

event.charCode is only supported on keydown and keyup by Internet Explorer (Mac).

Try it on JSFiddle

edited May 23 '17 at 12:25

Community

1
1

answered Feb 11 '14 at 12:13

Cees Timmerman

17,623
11
91
124

5

This helped for me. It should be the accepted answer. I am using the following line to normalize these properties: `var code = event.which || event.keyCode || event.charCode;` This grabs whichever field is not null or 0. If they are all zero, then it returns 0. – Andrew Craswell Jan 04 '16 at 21:24

event.keycode vs event.which

2 Answers2

Linked