Open In App

HTML | DOM KeyboardEvent

Last Updated : 08 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 down 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. 

html




<!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>


Output: 

Before Pressing a key:

  

After Pressing a key:

  

 

Example-2: Showing onkeydown event. 

html




<!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>


Output: 

Before Pressing a key:

  

After Pressing a key: 

 

 

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

html




<!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>


Output: 

Before Pressing a key:

  

After Pressing a key:

   

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

html




<!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>


Output: 

Before Pressing a key:

  

After Pressing a key:

  

Browser Support: The listed browsers support DOM Keyboard Event-

  • Google Chrome 1
  • Mozilla Firefox 1.5
  • Internet Explorer 9
  • Edge 12
  • Safari 1.2
  • Opera 12.1


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads