Article Categories

Selected Reading

Simplest way to detect keypresses in JavaScript?

Javascript Web Development Object Oriented Programming

The simplest way to detect keypresses in JavaScript is using the onkeypress event handler. However, modern JavaScript also provides addEventListener for better event handling.

document.onkeypress

The key press is matched with the keyCode property, which returns the Unicode character code of the key that triggered the onkeypress event.

Using document.onkeypress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keypress Detection</title>
</head>
<body>
    <p>Press any key to see the detection in action!</p>
    <div id="output"></div>

    <script>
        document.onkeypress = function (event) {
            event = event || window.event;
            const output = document.getElementById('output');
            
            if(event.keyCode == 13) {
                console.log('You have pressed enter key');
                output.innerHTML = 'Enter key pressed!';
            } else {
                const character = String.fromCharCode(event.keyCode);
                console.log('Key pressed: ' + character);
                output.innerHTML = 'Key pressed: ' + character;
            }
        };
    </script>
</body>
</html>

Using addEventListener (Modern Approach)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Keypress Detection</title>
</head>
<body>
    <p>Press keys to see detection with addEventListener:</p>
    <div id="modern-output"></div>

    <script>
        document.addEventListener('keypress', function(event) {
            const output = document.getElementById('modern-output');
            
            if(event.key === 'Enter') {
                console.log('Enter key detected');
                output.innerHTML = 'Enter key detected!';
            } else {
                console.log('Key pressed: ' + event.key);
                output.innerHTML = 'Key pressed: ' + event.key;
            }
        });
    </script>
</body>
</html>

Comparison of Methods

Method	Browser Support	Key Property	Multiple Listeners
`document.onkeypress`	All browsers	`keyCode`	No
`addEventListener`	Modern browsers	`key`	Yes

Key Points

onkeypress is deprecated but still widely supported
addEventListener with 'keydown' or 'keyup' is preferred for modern applications
Use event.key instead of keyCode for better readability
The keypress event only fires for printable characters

Conclusion

While document.onkeypress is the simplest method, using addEventListener with 'keydown' events provides better flexibility and modern JavaScript practices. Choose based on your browser support requirements.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

349 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next