Skip to content
Related Articles

Related Articles

How to find out which character key is pressed using JavaScript?
  • Last Updated : 06 Sep, 2019

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :