How to find out which Character Key is Pressed using JavaScript?

Last Updated : 09 Oct, 2024

To find which key is pressed in JavaScript, use event listeners like keydown, keypress, or keyup. By accessing properties such as event.key or event.code, it becomes easy to identify the specific key pressed. This approach is useful for handling user input and triggering actions based on key events.

Approach

Attach an event to the input box. like the onkeypress event.
Call a function when that event happens and pass the event parameter in it.
In the called function, identify the key pressed.

Example 1: This example uses the approach defined above.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to find out which character
        key is pressed using JavaScript?
    </title>
</head>

<body id="body" style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px;
              font-weight: bold;">
    </p>
    <form>
        Type Here:
        <input type="text" onkeypress="return GFG_Fun(event)" />
    </form>
    <p id="GFG_DOWN" style="color:green;
              font-size: 20px;
              font-weight: bold;">
    </p>
    <script>
        let up = document.getElementById('GFG_UP');
        up.innerHTML =
            "Type in the Input box to see functioning.";
        let down = document.getElementById('GFG_DOWN');

        function GFG_Fun(e) {
            let key;
            if (window.event) {
                key = e.keyCode;
            } else if (e.which) {
                key = e.which;
            }
            let str = down.innerHTML;
            str += String.fromCharCode(key);
            down.innerHTML = str;
        }
    </script>
</body>

</html>

Output: