Keycode and charcode

Question

Why do people write a statement like

e.keyCode ? e.keyCode : e.charCode 

Some people also use e.which

Can someone explain?

Answer 1

Handling key events sequentially is not always easy.

Firstly, there are two different types of codes: keyboard codes (a number denoting the key on the keyboard that the user pressed) and character codes (a number denoting a Unicode character). You can only reliably get character codes in a keypress event. Do not try to get character codes for keyup and keydown .

Secondly, you get different sets of values ​​in the keypress event for what you get in the keyup or keydown .

I recommend this page as a useful resource. In summary:

If you are interested in finding the user who typed a character, use the keypress event. Strange IE only stores the character code in keyCode , and all other browsers store it in which . Some (but not all) browsers also store it in charCode and / or keyCode . An example of a keystroke handler:

 function(evt) { evt = evt || window.event; var charCode = evt.which || evt.keyCode; var charStr = String.fromCharCode(charCode); alert(charStr); } 

If you are interested in finding a non-printable key (for example, cursor keys), use the keydown event. Here keyCode always a property of use. Note that keyup events have the same properties.

 function(evt) { evt = evt || window.event; var keyCode = evt.keyCode; // Check for left arrow key if (keyCode == 37) { alert("Left arrow"); } } 

Answer 2

This is a conditional statement.

If the browser disables e.keyCode, then take e.keyCode else e.charCode.

He looks like

 var code = event.keyCode || event.charCode 

event.keyCode : returns the Unicode value of a non-character key in a keypress event or any key of any other type of keyboard event.

event.charCode : returns the Unicode value of the character key pressed during the keypress event.

Answer 3

keyCode and which are the actual keyboard key pressed as a numeric value. The reason is that keyCode is available in Internet Explorer, while it is available in W3C browsers such as FireFox.

charCode is similar, but in this case you are retrieving the Unicode value of the character. For example, the letter "A."

JavaScript expression:

 var keyCode = e.keyCode ? e.keyCode : e.charCode; 

Essentially the following is said:

If the e.keyCode property exists, set it to keyCode. Otherwise, set the keyCode variable to the value of the e.charCode property.

Note that getting keyCode or charCode properties is usually related to clarifying the differences between event models in IE and W3C. Some entails writing code as follows:

 /* get the event object: either window.event for IE or the parameter e for other browsers */ var evt = window.event ? window.event : e; /* get the numeric value of the key pressed: either event.keyCode for IE for e.which for other browsers */ var keyCode = evt.keyCode ? evt.keyCode : e.which; 

EDIT : Corrections to my explanation of charCode according to Tor Haugen's comments.

Answer 4

Ok, here are the explanations.

e.keyCode - used to get the number representing the key on the keyboard

e.charCode - a number representing the unicode character of a key on a keyboard

e.which - (jQuery specific) - this is a property introduced in jQuery (DO not used in plain javascript)

Below is a code snippet for getting keyCode and charCode

 <script> // get key code function getKey(event) { event = event || window.event; var keyCode = event.which || event.keyCode; alert(keyCode); } // get char code function getChar(event) { event = event || window.event; var keyCode = event.which || event.keyCode; var typedChar = String.fromCharCode(keyCode); alert(typedChar); } </script> 

Live example Getting keyCode and charCode in JavaScript .

Answer 5

I (being myself) wrote this statement because I wanted to find the key that the user typed on the keyboard in different browsers.

For example, in firefox, characters have> 0 charCode and 0 keyCode, and keys such as arrows and backspace have> 0 keyCode and 0 charCode.

However, the use of this statement can be problematic, since "collisions" are possible. For example, if you want to distinguish between the Delete and Period keys, this will not work, since Delete has keyCode = 46 and Period has charCode = 46.

Answer 6

When using jQuery, the event.which property is event.which to avoid browser differences. See documents .

The which property will be undefined if you are not using jQuery.