RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/dom/KeyboardEvent/keypress below:

keypress · WebPlatform Docs

keypress Summary

Deprecated event for detecting when a key was pressed on the keyboard.

Overview Table Synchronous Yes Bubbles Yes Target [dom/Element](/dom/Element), [dom/Document](/dom/Document) Cancelable Yes Default action Varies: launch text composition system; blur and focus events; DOMActivate event; other event

This event used to be used to detect when a key value was inserted into the DOM. Developers should use beforeInput, keyup, or keydown events depending on the task instead of this event.

Context information

Event.target: focused element which triggered the key event. This will be the root element if no suitable input element is focused.
KeyboardEvent.charCode; legacy character code value for the event
KeyboardEvent.keyCode; legacy numerical code for the key pressed
KeyboardEvent.which; legacy numerical code for the key pressed
KeyboardEvent.key; The key value of the key pressed
KeybaordEvent.location; The location of the key on the device
KeyboardEvent.altKey; true if ‘Alt’ modifier was active, otherwise false
KeyboardEvent.shiftKey; true if ‘Shift’ modifier was active, otherwise false
KeyboardEvent.ctrlKey; true if ‘Control’ modifier was active, otherwise false
KeyboardEvent.metaKey; true if ‘Meta’ modifier was active, otherwise false
KeyboardEvent.repeat; true if a key has been depressed long enough to trigger key repetition, otherwise false.

Examples

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Keypress event demonstration</title>
    <style>
        // this styling only exists so things look better on code.webplatform.org
        form {
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <form>
        <label for="keypress">Keypress</label>
        <input name="keypress"/>
    </form>
    <div id="target">
        <p>The last key code you entered for keypress is: <span id="keypressEcho"></span></p>
    </div>

    <script>
    
    var keypressInput = document.getElementsByName('keypress')[0];
    var keypressTarget = document.getElementById('keypressEcho');

    
    keypressInput.addEventListener('keypress', function(e) {
        
        keypressTarget.textContent = e.which;
        
        console.log(e.which);
    });
    </script>
</body>
</html>

View live example

Usage

 ===Related event order===

keydown
beforeInput
keypress
input
keyup