YouTipEvent Key Location
# KeyboardEvent.location Property
The `KeyboardEvent.location` property returns a numeric value representing the physical location of a key on the keyboard or input device.
This property is particularly useful when you need to distinguish between keys that share the same value but reside in different physical positions, such as the left and right `Shift` keys, or the standard number keys versus the numeric keypad.
---
## Syntax
```javascript
let keyLocation = event.location;
```
### Return Value
A **read-only** integer (`0`, `1`, `2`, or `3`) representing the physical location of the key. These numbers correspond to four standard DOM constants:
| Constant | Value | Description |
| :--- | :--- | :--- |
| `KeyboardEvent.DOM_KEY_LOCATION_STANDARD` | `0` | **Standard Location:** The key is not distinguished as left or right, and is not on the numeric keypad (e.g., `A`, `U`, `Space`, `Enter`, or the standard `5` key). |
| `KeyboardEvent.DOM_KEY_LOCATION_LEFT` | `1` | **Left Location:** The key was activated from the left side of the keyboard (e.g., left `Ctrl`, left `Alt`, left `Shift`, or left `Meta` key). |
| `KeyboardEvent.DOM_KEY_LOCATION_RIGHT` | `2` | **Right Location:** The key was activated from the right side of the keyboard (e.g., right `Ctrl`, right `Alt`, right `Shift`, or right `Meta` key). |
| `KeyboardEvent.DOM_KEY_LOCATION_NUMPAD` | `3` | **Numeric Keypad:** The key was activated on the numeric keypad (e.g., the numbers on the right-side numpad, or keys like `NumLock`). |
---
## Code Examples
### Example 1: Basic Usage
The following example captures the key location value when a user presses a key.
```javascript
window.addEventListener("keydown", function(event) {
let x = event.location;
console.log("Key location value: " + x);
// Output: 0, 1, 2, or 3 depending on the key pressed
});
```
### Example 2: Distinguishing Left and Right Modifier Keys
This interactive example demonstrates how to detect whether the user pressed the left or right `Shift` key, or used the numeric keypad.
```javascript
window.addEventListener("keydown", function(event) {
let keyName = event.key;
let location = event.location;
let locationText = "";
switch(location) {
case KeyboardEvent.DOM_KEY_LOCATION_STANDARD:
locationText = "Standard position";
break;
case KeyboardEvent.DOM_KEY_LOCATION_LEFT:
locationText = "Left side";
break;
case KeyboardEvent.DOM_KEY_LOCATION_RIGHT:
locationText = "Right side";
break;
case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD:
locationText = "Numeric Keypad";
break;
default:
locationText = "Unknown";
}
console.log(`Key: "${keyName}" | Location: ${locationText} (${location})`);
});
```
---
## Important Considerations
* **Event Compatibility:** The `location` property is fully supported in `keydown` and `keyup` events. However, it is **not** supported in the deprecated `keypress` event.
* **Read-Only:** The `location` property is read-only. You cannot programmatically alter its value.
* **Browser Support:** Modern browsers fully support this property. Note that older versions of Safari (prior to Safari 10) and legacy mobile browsers may have limited or inconsistent support.
---
## Technical Specifications
| Feature | Specification |
| :--- | :--- |
| **Return Type** | `Number` (0, 1, 2, or 3) |
| **DOM Version** | DOM Level 3 Events |
| **Writable** | No (Read-Only) |