Skip to content
Related Articles

Related Articles

HTML | DOM KeyboardEvent location Property
  • Last Updated : 14 Feb, 2019

The KeyboardEvent location property is used for returning a number that indicates the location of a key on the keyboard or device.
The KeyboardEvent location property can be used on the onkeydown and onkeyup events but not on onkeypress.

The number returned by KeyboardEvent location property is represented by 4 constants:

ConstantLocationDescription
0DOM_KEY_LOCATION_STANDARDThis value represents almost every key on the keyboard, e.g. “B”, “R”, “SPACE” or “8”.
1DOM_KEY_LOCATION_LEFTThis value represents a left key, e.g. the left “CTRL” key or left “ALT” key.
2DOM_KEY_LOCATION_RIGHTThis value represents a right key, e.g. the right “CTRL” key or right “ALT” key.
3DOM_KEY_LOCATION_NUMPADThis value represents a numeric key or a numpad key.

Syntax

event.location

Below program illustrates the KeyboardEvent location property :

Example-1: Getting the location of a key.






<!DOCTYPE html>
<html>
  
<head>
    <title>KeyboardEvent location Property in HTML
  </title>
    <style>
        div {
            border: 3px solid green;
            height: 100px;
            width: 500px;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>KeyboardEvent location Property</h2>
  
    <p>To return the location of a key,
      insert some character in the field.</p>
  
    <input type="text" 
           size="20" 
           onkeydown="keyboard(event)">
  
    <p id="test"></p>
  
    <script>
        function keyboard(event) {
            
            //  Return location of key.
            var gfg = event.location;
            document.getElementById("test").innerHTML = 
              "Location of the pressed key is : " + gfg;
        }
    </script>
  
</body>
  
</html>

Output:
Before pressing a button:

After pressing a button:

Supported Browsers:

  • Opera
  • Internet Explorer
  • Google Chrome
  • Firefox
  • Apple Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :