JavaScript KeyCode vs CharCode

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?

Solution 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.

Solution 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/.

Solution 3:

Actually, 104 is the ASCII code for lowercase 'h'. To get the ASCII code of the typed character onkeypress, you can just use e.which || e.keyCode, and you don't need to worry about held down keys because for typed text, keypress is auto-repeated in all browsers (according to the excellent http://unixpapa.com/js/key.html).

So all you really need is:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Try it: http://jsfiddle.net/wcDCJ/1/

(The ASCII codes are from http://en.wikipedia.org/wiki/Ascii)

Solution 4:

onKeyPress has different codes for upper and lower case letters. You'd probably find that turning on the cap-lock and then typing your letter would give you the code you expect

onKeyUp and onKeyDown have the same character codes for upper and lower-case letters. It'd recommend using onKeyUp because it's the closest to onKeyPress