Open In App

How to find out which character key is pressed using JavaScript?

Improve
Improve
Like Article
Like
Save
Share
Report

Here, the task is to get the character key, which is pressed. In the code written below, an event triggered when any key is pressed and it calls a function then that function identifies it.

Approach:

  • Attach an event to the input box. like 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 using the approach defined above.




<!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>
        var up = document.getElementById('GFG_UP');
        up.innerHTML =
            "Type in the Input box to see functioning.";
        var down = document.getElementById('GFG_DOWN');
  
        function GFG_Fun(e) {
            var key;
            if (window.event) {
                key = e.keyCode;
            } else if (e.which) {
                key = e.which;
            }
            var str = down.innerHTML;
            str += String.fromCharCode(key);
            down.innerHTML = str;
        }
    </script>
</body>
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example using the approach defined above.




<!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>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Type in the Input box to see functioning.";
        var down = document.getElementById('GFG_DOWN');
  
        function GFG_Fun(e) {
            var str = down.innerHTML;
            str += e.key
            down.innerHTML = str;
        }
    </script>
</body>
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:


Last Updated : 06 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads