Article Categories

Selected Reading

How to find out what character key is pressed in JavaScript?

Javascript Web Development Object Oriented Programming

To find out which character key is pressed in JavaScript, you can use various methods. The modern approach uses the key property, while legacy methods relied on keyCode.

Modern Approach: Using event.key

The key property directly returns the character that was pressed, making it the preferred method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key Detection - Modern Method</title>
</head>
<body>
    <h3>Type in the input field below:</h3>
    <input type="text" id="modernInput" placeholder="Press any key...">
    <p id="result"></p>

    <script>
        document.getElementById('modernInput').addEventListener('keydown', function(event) {
            document.getElementById('result').textContent = 'You pressed: ' + event.key;
        });
    </script>
</body>
</html>

Legacy Approach: Using keyCode

The traditional method uses keyCode with String.fromCharCode() to convert the code to a character:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key Detection - Legacy Method</title>
</head>
<body>
    <h3>Legacy keyCode method:</h3>
    <input type="text" onkeypress="keyPressName(event)" placeholder="Press any key...">

    <script>
        function keyPressName(event) {
            var pressedKey;
            if (window.event) {
                pressedKey = event.keyCode;
            } else if (event.which) {
                pressedKey = event.which;
            }
            alert('Character: ' + String.fromCharCode(pressedKey));
        }
    </script>
</body>
</html>

Complete Example with Multiple Event Types

This example demonstrates different keyboard events and their properties:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Key Detection</title>
</head>
<body>
    <h3>Key Detection Demo</h3>
    <input type="text" id="keyInput" placeholder="Press any key...">
    <div id="keyInfo"></div>

    <script>
        const input = document.getElementById('keyInput');
        const info = document.getElementById('keyInfo');

        input.addEventListener('keydown', function(event) {
            info.innerHTML = `
                <p><strong>Key:</strong> ${event.key}</p>
                <p><strong>Code:</strong> ${event.code}</p>
                <p><strong>KeyCode (deprecated):</strong> ${event.keyCode}</p>
            `;
        });
    </script>
</body>
</html>

Comparison of Methods

Method	Browser Support	Ease of Use	Status
`event.key`	Modern browsers	Easy - direct character	Recommended
`event.keyCode`	All browsers	Requires conversion	Deprecated
`event.code`	Modern browsers	Physical key position	Alternative

Key Points

event.key returns the actual character pressed
event.code returns the physical key identifier
keyCode is deprecated but still works for legacy support
Use keydown event for better compatibility with all keys

Conclusion

Use event.key for modern applications as it directly provides the pressed character. The legacy keyCode method should only be used when supporting very old browsers.

AmitDiwan

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

741 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next