HTML | DOM KeyboardEvent

It refers to the events which occur when a key is pressed on the keyboard.

Syntax:

<input type=”text” onkeypress/onkeydown/onkeyup=”function()/event”>



Events:The following events occur on pressing a key-

  • onkeydown

  • onkeypress

  • onkeyup

Properties:

  • altKey: It returns if alt key was pressed or not.

  • charCode: It returns unicode character of the key.

  • code: It returns the code of the entered key.

  • ctrlKey: It returns if ctrl key was pressed or not.


  • getModifierState(): It returns true if the specified key is activated.

  • isComposing: It returns whether the event is composing or not.

  • key: It returns the key value.

  • keyCode: It returns unicode character of the onkeypress or onkey doen event.

  • location: It returns the location of the key on the keyboard.

  • metaKey: It returns if meta key was pressed or not.

  • repeat: It returns if a key is repeatedly holding on.

  • shiftKey: It returns if shift key was pressed or not.

  • which: It returns the unicode character of event type.

Return Value: It returns events which occur when a given key is pressed from the keyboard.

Example-1: Showing onkeypress event.


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1>
      <center>Geeks for Geeks </center
  </h1>
  
    <p>Type something in the box:</p>
  
    <input type="text" onkeypress="key()">
  
    <script>
        function key() {
            alert("New Key Inserted");
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before Pressing a key:

After Pressing a key:

Example-2: Showing onkeydown event.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1>
      <center>Geeks for Geeks </center>
  </h1>
  
    <p>Type something in the box:</p>
  
    <input type="text" onkeydown="key()">
  
    <script>
        function key() {
            alert("New Key Inserted");
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before Pressing a key:

After Pressing a key:

Example-3: To check if the pressed key is Alt or not.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1>
      <center>Geeks for Geeks </center
  </h1>
  
    <p>Type something in the box to 
      check if Alt key is pressed or not:</p>
  
    <input type="text" onkeydown="isKeyPressed(event)">
  
    <p id="gfg"></p>
  
    <script>
        function isKeyPressed(event) {
            var x = document.getElementById("gfg");
            if (event.altKey) {
                x.innerHTML = "ALT Key Pressed";
            } else {
                x.innerHTML = "ALT Key Not Pressed";
            }
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before Pressing a key:

After Pressing a key:


Example-4: To find out the pressed key from the keyboard.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1>
      <center>Geeks for Geeks </center
  </h1>
  
    <p>Type something in the box
      to know the entered key:</p>
  
    <input type="text" 
           size="40" 
           onkeydown="myFunction(event)">
  
    <p id="gfg"></p>
  
    <script>
        function myFunction(event) {
            var x = event.key;
            
            document.getElementById(
              "gfg").innerHTML =
              "Entered Key is: " + x;
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before Pressing a key:

After Pressing a key:

Browser Support: The listed browsers support DOM Keyboard Event-

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.