Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM KeyboardEvent location Property
The HTML DOM KeyboardEvent location property returns a numeric value indicating the physical location of the pressed key on the keyboard. This property helps distinguish between keys that have the same keyCode but exist in different locations, such as left and right Shift keys.
Syntax
Following is the syntax for accessing the location property −
event.location
Return Values
The property returns one of four possible numeric values representing different keyboard sections −
| Value | Description |
|---|---|
| 0 | Standard keys (most keys on the keyboard including letters, numbers, space bar, and function keys) |
| 1 | Left-side modifier keys (left Ctrl, left Shift, left Alt, left Windows key) |
| 2 | Right-side modifier keys (right Ctrl, right Shift, right Alt, right Windows key) |
| 3 | Numeric keypad keys (numbers 0-9, operators +, -, *, /, Enter, and period on the numpad) |
Example − Detecting Key Locations
Following example demonstrates how to detect which section of the keyboard was pressed −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
input[type="text"] {
padding: 10px;
margin: 10px;
width: 300px;
border: 2px solid #ccc;
border-radius: 5px;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #f0f0f0;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent Location Detection</legend>
<label>Type here or press modifier keys:
<input type="text" id="textInput" placeholder="Press any key..." onkeydown="detectLocation(event)" autocomplete="off">
</label>
<div id="result">Press a key to see its location...</div>
</fieldset>
</form>
<script>
function detectLocation(event) {
var resultDiv = document.getElementById("result");
var locationText = "";
switch(event.location) {
case 0:
locationText = "Standard key pressed (location: 0)";
break;
case 1:
locationText = "Left-side modifier key pressed (location: 1)";
break;
case 2:
locationText = "Right-side modifier key pressed (location: 2)";
break;
case 3:
locationText = "Numpad key pressed (location: 3)";
break;
}
resultDiv.textContent = locationText + " - Key: " + event.key;
}
</script>
</body>
</html>
The output shows different messages based on which keyboard section is used −
When pressing 'A': Standard key pressed (location: 0) - Key: a When pressing left Shift: Left-side modifier key pressed (location: 1) - Key: Shift When pressing right Ctrl: Right-side modifier key pressed (location: 2) - Key: Control When pressing numpad '5': Numpad key pressed (location: 3) - Key: 5
Example − Distinguishing Left and Right Keys
Following example specifically demonstrates the difference between left and right modifier keys −
<!DOCTYPE html>
<html>
<head>
<title>Left vs Right Key Detection</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; text-align: center; }
.key-display {
display: inline-block;
margin: 10px;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
width: 200px;
}
.left-key { background-color: #e3f2fd; border-color: #2196f3; }
.right-key { background-color: #f3e5f5; border-color: #9c27b0; }
</style>
</head>
<body>
<div class="container">
<h2>Press Left or Right Modifier Keys</h2>
<input type="text" placeholder="Focus here and press Shift, Ctrl, or Alt keys" onkeydown="showKeyLocation(event)" style="width: 400px; padding: 10px;">
<div class="key-display left-key" id="leftDisplay">
<h3>Left Side (1)</h3>
<p id="leftStatus">Not pressed</p>
</div>
<div class="key-display right-key" id="rightDisplay">
<h3>Right Side (2)</h3>
<p id="rightStatus">Not pressed</p>
</div>
</div>
<script>
function showKeyLocation(event) {
var leftStatus = document.getElementById("leftStatus");
var rightStatus = document.getElementById("rightStatus");
// Reset both displays
leftStatus.textContent = "Not pressed";
rightStatus.textContent = "Not pressed";
if (event.location === 1) {
leftStatus.textContent = "Pressed: " + event.key;
} else if (event.location === 2) {
rightStatus.textContent = "Pressed: " + event.key;
}
}
</script>
</body>
</html>
This example visually shows which side of the keyboard (left or right) was pressed, making it easy to understand the location property's functionality.
Common Use Cases
The location property is particularly useful in the following scenarios −
Game development − Distinguishing between left and right modifier keys for different player actions
Keyboard shortcuts − Creating different behaviors for left vs right Ctrl+Key combinations
Accessibility tools − Providing specific functionality based on which hand is being used
Input validation − Ensuring numeric input comes from the main keyboard or numpad specifically
Browser Compatibility
The location property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It is part of the DOM Level 3 Events specification and provides consistent behavior across different platforms.
Conclusion
The KeyboardEvent location property provides a reliable way to identify the physical location of pressed keys on the keyboard. It returns numeric values (0-3) representing standard keys, left modifiers, right modifiers, and numpad keys respectively, making it invaluable for applications requiring precise keyboard input detection.
170 Views
