JavaScript KeyCode vs CharCode

Question

The problem:

• Limit allowed characters in a HTML input to a-z A-Z only.
• For business requirements this needs to be done on KeyPress so that the character simply isnt allowed to even appear in the input.
• Tab, enter, arrows, backspace, shift are all allowed. The user must be able to freely move in and out of the textbox, delete characters etc etc.

This is the starting point of my code...

var keyCode = (e.keyCode ? e.keyCode : e.which); 

However every value that I get in keyCode doesnt correspond to any of the character charts I have seen on the web. For example the character "h" gives me a return code of 104.

Is KeyCode different to CharCode? Which code contains the control characters? Do I need to convert?

How can I restrict the input to a-z A-Z and allow the keys I need in JavaScript?

Answer 1

The answers to all your questions can be found on the following page.

...but in summary:

• The only event from which you can reliably obtain character information (as opposed to key code information) is the keypress event.
• In the keypress event, all browsers except IE <= 8 store the character code in the event's which property. Most but not all of these browsers also store the character code in the charCode property.
• In the keypress event, IE <= 8 stores the character code in the keyCode property.

This means to get the character code corresponding to the keypress, the following will work everywhere, assuming a keypress event object is stored in a variable called e:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode 

This will generally return you a character code where one exists and 0 otherwise. There are a few cases where you'll get a non-zero value when you shouldn't:

• In Opera < 10.50 for keys Insert, Delete, Home and End
• In recent versions of Konqueror for non-character keys.

The workaround for the first problem is a little involved and requires using the keydown event as well.

Answer 2

Good grief. KeyboardEvent.[key, char, keyCode, charCode, which] are all deprecated or currently have outstanding bugs according to Mozilla's API docs - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent. Even JQuery passes the buck on this one and lets the user figure it out https://api.jquery.com/keydown/.