You are here: Reference > JavaScript > client-side > event handling > properties > keyCode (event)

keyCode property (event)

Browser support:
Sets or retrieves the Unicode character code of the key that generated the onkeypress event and the Unicode key code of the key that generated the onkeydown and onkeyup events.
  • In Google Chrome, Safari and Internet Explorer from version 9, the keyCode and charCode properties are identical for the onkeypress events.
  • In Firefox, if the pressed key generates a character, the charCode property contains the character code, else the keyCode property.
  • In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, the which property can also be used, it always returns the Unicode character code of the key that was pressed for onkeypress events.
If you need to detect whether the ALT, CONTROL, META or SHIFT key was down at the time when the event occurred, use the altKey, ctrlKey, metaKey or shiftKey property.

Syntax:

object.keyCode;
You can find the related objects in the Supported by objects section below.
The keyCode property is read-only in Firefox, Opera, Google Chrome and Safari, and it is read/write in Internet Explorer.

Possible values:

Integer that specifies or retrieves the Unicode character or key code.
Predefined constants are available for the possible Unicode key codes, in the scope of the KeyboardEvent interface. You can use them directly through the KeyboardEvent interface (KeyboardEvent.DOM_VK_A) or through an instance of the event object. For further details, please see the page for the KeyboardEvent interface. Unfortunately, these constants are only supported by Firefox, so use the numeric values instead of the predefined constants for a cross-browser solution.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the keyCode property:
<head>
    <script type="text/javascript">
        function GetChar (event) {
            alert ("The Unicode key code is: " + event.keyCode);
        }
    </script>
</head>
<body>
    <input size="40" value="Write a character into this field!" onkeydown="GetChar (event);"/>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to create a text field that does not accept numeric input:
<head>
    <script type="text/javascript">
        function FilterInput (event) {
            var keyCode = ('which' in event) ? event.which : event.keyCode;

            isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
                        (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
            modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
            return !isNumeric || modifiers;
        }
    </script>
</head>
<body>
    The following text field does not accept numeric input:
    <input type="text" onkeydown="return FilterInput (event)" />
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example is same as the previous one, but it uses the onkeypress event instead of the onkeydown event:
<head>
    <script type="text/javascript">
        function FilterInput (event) {
            var chCode = ('charCode' in event) ? event.charCode : event.keyCode;

                // returns false if a numeric character has been entered
            return (chCode < 48 /* '0' */ || chCode > 57 /* '9' */);
        }
    </script>
</head>
<body>
    The following text field does not accept numeric input:
    <input type="text" onkeypress="return FilterInput (event)" />
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content