In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onkeydown

onkeydown event | keydown event

Browser support:

Occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.

In Opera, the onkeydown event is fired only once, when a key is pressed down.

To get the pressed key, use the keyCode and which event properties.

The onkeypress event is similar to the onkeydown event, but it does not fire for all key types in all browsers. For details, please see the page for the onkeypress event.

If you want to cancel input from the keyboard, it is better to cancel both the onkeydown and onkeypress events, because sometimes the onkeydown event, sometimes the onkeypress event needs to be canceled depending on the browser and the type of the pressed key. For example, if you want to cancel the cursor left, up, right and down keys, the onkeydown event needs to canceled in Internet Explorer, Firefox, Google Chrome and Safari and the onkeypress event needs to be canceled in Opera. For alphanumeric characters, canceling one of the onkeydown and onkeypress events is sufficient.

Use the onkeyup event to receive a notification when a key is released.

How to register:

In HTML:

In JavaScript:

object.onkeydown = handler;

object.addEventListener ("keydown", handler, useCapture);

9

object.attachEvent ("onkeydown", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	Yes
Event object	KeyboardEvent

Actions that invoke the onkeydown event:

Pressing a key.
Holding down a key.

The order of events related to the onkeydown event:

onkeydown
onkeypress
onkeyup

Example HTML code 1:

This example illustrates the use of the onkeydown event:

<head>
    <script type="text/javascript">
        function GetChar (event){
            var keyCode = ('which' in event) ? event.which : event.keyCode;
            alert ("The Unicode key code is: " + keyCode);
        }
    </script>
</head>
<body>
    <input size="40" value="Write a character into this field!" onkeydown="GetChar (event);"/>
</body>

Copy Code

Preview

Syntax Highlighter

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>