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

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

onkeypress event | keypress 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.

The onkeypress event is not fired for all key types in all browsers. For details, please see the table below.

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

If you only want to detect whether the user has pressed a key, use the onkeydown event instead, because it works for all key types.

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.

The following table describes what keys fire the onkeypress event in different browsers:

Key	Internet Explorer	Firefox	Opera	Google Chrome and Safari
Alphanumeric, +, -, , /, ENTER, SPACE*	yes	yes	yes	yes
ALT, CTRL, META, SHIFT	no	no	yes	no
ESC	yes	yes	yes	no
Fn, cursor left, up, right and down keys, Insert, Delete, Home, End, Page Up, Page Down, Backspace	no	yes	yes	no

How to register:

In HTML:

In JavaScript:

object.onkeypress = handler;

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

9

object.attachEvent ("onkeypress", 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 onkeypress event:

Pressing a key.
Holding down a key.

The order of events related to the onkeypress event:

onkeydown
onkeypress
onkeyup

Example HTML code 1:

This example illustrates the use of the onkeypress event:

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

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This is another example for the onkeypress event:

<head>
    <script type="text/javascript">
        function Init () {
            var counter = document.getElementById ("counter");
            for (var i = 1; i < 1000; i++) {
                var option = new Option (i, i);
                counter.options.add (option);
            }
            counter.focus ();
        }

        function OnKeyPressCounter (event, counter) {
            var chCode = ('charCode' in event) ? event.charCode : event.keyCode;

            if (chCode == 43 /* + */) {
                if (counter.selectedIndex < counter.options.length - 1) {
                    counter.selectedIndex++;
                }
            }
            if (chCode == 45 /* - */) {
                if (counter.selectedIndex > 0) {
                    counter.selectedIndex--;
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Use the + and - keys to increase/decrease the counter.
    <select id="counter" onkeypress="OnKeyPressCounter (event, this)" style="width:80px"></select>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to create a text field that does not accept numeric input:

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