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:
<ELEMENT onkeypress="handler">

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:

  1. onkeydown
  2. onkeypress
  3. 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>
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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content