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:
| Constant |
Location |
Description |
| 0 |
DOM_KEY_LOCATION_STANDARD |
This value represents almost every key on the keyboard, e.g. “B”, “R”, “SPACE” or “8”. |
| 1 |
DOM_KEY_LOCATION_LEFT |
This value represents a left key, e.g. the left “CTRL” key or left “ALT” key. |
| 2 |
DOM_KEY_LOCATION_RIGHT |
This value represents a right key, e.g. the right “CTRL” key or right “ALT” key. |
| 3 |
DOM_KEY_LOCATION_NUMPAD |
This 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.
html
<!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 17
- Internet Explorer 9
- Google Chrome 30
- Edge 12
- Firefox 15
- Apple Safari 8
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jul, 2022
Like Article
Save Article