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

Answer 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)

Answer 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

Answer 5

/* You won't get a keyCode on keypress for non-printing keys, why not capture them on keydown instead? */

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc<91 // a-zA-Z

xtrakeys['k'+integer]) defines special keycodes allowed

Answer 6

Here is example markup:

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

The following logic can be used to trap for keyboard input (in this case, via a jQuery document ready wrapper).

It may read a little goofy, but basically, I check for everything I want to allow for (in your case, the letters A through Z case insensitive) and do nothing. In other words, the default action is allowed, but any input other than alpha is prevented.

Standard keyboard navigation, such as arrow keys, Home, End, Tab, Backspace, Delete and so forth are checked for and allowed.

NOTE: This code was originally written to satisfy user input permitting only alphanumeric values (A - Z, a - z, 0 - 9), and I left those lines intact as comments.

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey );

                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>

Answer 7

I think keyCode returns the ASCII key value, Ascii-104 is h.

http://www.asciitable.com/

Charcode is as noted in another answer an alternative used in some browsers.

Here is a article with a crssbrowser example: http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

Answer 8

I think you're taking the wrong approach entirely. How about something like:

<input id="test">

<script type="text/javascript">
var aToZ = function(el){
    if(this.value.match(/[^a-zA-Z]/)){
        this.value = this.value.replace(/[^a-zA-Z]+/, '')
    }
}
document.getElementById("test").onkeyup = aToZ
</script>

Also, don't forget to repeat the check server-side too.