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 getModifierState( ) Method
The getModifierState() method is a property of the KeyboardEvent interface that returns a boolean value indicating whether the specified modifier key was pressed when the keyboard event occurred. This method is essential for detecting the state of modifier keys like Ctrl, Alt, Shift, and CapsLock during user input.
Syntax
Following is the syntax for the getModifierState() method −
event.getModifierState(keyArg)
Parameters
The method takes a single parameter −
keyArg − A string representing the modifier key to check. The parameter is case-sensitive.
Return Value
The method returns a boolean value −
true − If the modifier key is active or pressed
false − If the modifier key is inactive or not pressed
Modifier Keys
The method accepts the following modifier key strings −
| Modifier Key | Description |
|---|---|
| Alt | Alt key (Option key on Mac) |
| AltGraph | AltGr key (right Alt key on some keyboards) |
| CapsLock | Caps Lock key toggle state |
| Control | Ctrl key (Cmd key on Mac) |
| Meta | Meta key (Windows key, Cmd key on Mac) |
| NumLock | Num Lock key toggle state |
| ScrollLock | Scroll Lock key toggle state |
| Shift | Shift key |
Example − Detecting CapsLock State
Following example demonstrates how to detect CapsLock state while typing in a password field −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent getModifierState()</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 8px;
}
input[type="password"] {
padding: 8px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
padding: 10px;
}
.caps-on { color: red; }
.caps-off { color: green; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent getModifierState()</legend>
<label>Password:
<input type="password" id="textSelect" onkeydown="getEventState(event)" autocomplete="off">
</label>
<div id="divDisplay">Press CapsLock key while typing</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
function getEventState(event) {
if(event.getModifierState("CapsLock")) {
divDisplay.textContent = 'CapsLock is turned ON. Beware!';
divDisplay.className = 'caps-on';
} else {
divDisplay.textContent = 'CapsLock is turned OFF.';
divDisplay.className = 'caps-off';
}
}
</script>
</body>
</html>
The output displays different messages based on the CapsLock state. When CapsLock is ON, a warning message appears in red. When OFF, a confirmation message appears in green.
Initial: Press CapsLock key while typing CapsLock ON: CapsLock is turned ON. Beware! (red text) CapsLock OFF: CapsLock is turned OFF. (green text)
Example − Multiple Modifier Keys
Following example shows how to detect multiple modifier keys simultaneously −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Modifier Keys Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Press different key combinations</h2>
<input type="text" id="keyInput" placeholder="Click here and press key combinations">
<div id="output" style="margin-top: 20px; font-weight: bold;"></div>
<script>
document.getElementById('keyInput').addEventListener('keydown', function(event) {
var modifiers = [];
if (event.getModifierState('Control')) modifiers.push('Ctrl');
if (event.getModifierState('Shift')) modifiers.push('Shift');
if (event.getModifierState('Alt')) modifiers.push('Alt');
if (event.getModifierState('Meta')) modifiers.push('Meta');
if (event.getModifierState('CapsLock')) modifiers.push('CapsLock');
var output = document.getElementById('output');
if (modifiers.length > 0) {
output.innerHTML = 'Active modifiers: ' + modifiers.join(', ') + '<br>Key pressed: ' + event.key;
} else {
output.innerHTML = 'No modifiers active<br>Key pressed: ' + event.key;
}
});
</script>
</body>
</html>
The output shows all active modifier keys along with the key that was pressed −
Example outputs: Active modifiers: Ctrl, Shift Key pressed: A No modifiers active Key pressed: b
Example − Keyboard Shortcuts Detection
Following example demonstrates using getModifierState() to create keyboard shortcuts −
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Shortcuts with getModifierState</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Keyboard Shortcuts Demo</h2>
<p>Try these shortcuts:</p>
<ul>
<li>Ctrl + S: Save</li>
<li>Ctrl + Shift + S: Save As</li>
<li>Alt + F4: Exit</li>
</ul>
<textarea placeholder="Click here and try the shortcuts" style="width: 100%; height: 100px;"></textarea>
<div id="shortcutOutput" style="margin-top: 15px; font-weight: bold; color: blue;"></div>
<script>
document.addEventListener('keydown', function(event) {
var output = document.getElementById('shortcutOutput');
if (event.getModifierState('Control') && event.key === 's') {
event.preventDefault();
if (event.getModifierState('Shift')) {
output.textContent = 'Save As triggered!';
} else {
output.textContent = 'Save triggered!';
}
} else if (event.getModifierState('Alt') && event.key === 'F4') {
event.preventDefault();
output.textContent = 'Exit triggered!';
}
setTimeout(function() {
output.textContent = '';
}, 2000);
});
</script>
</body>
</html>
The output shows which keyboard shortcut was triggered and clears after 2 seconds −
Save triggered! (when Ctrl+S is pressed) Save As triggered! (when Ctrl+Shift+S is pressed) Exit triggered! (when Alt+F4 is pressed)
Browser Compatibility
The getModifierState() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, some modifier keys like Meta and AltGraph may behave differently across operating systems and browsers.
Common Use Cases
The getModifierState() method is commonly used for −
Form validation − Warning users about CapsLock state during password entry
Keyboard shortcuts − Creating custom shortcuts with modifier key combinations
Text editors − Implementing text formatting shortcuts
Gaming applications − Detecting modifier keys for game controls
Accessibility features − Providing alternative input methods based on modifier key states
Conclusion
The getModifierState() method provides an efficient way to detect modifier key states during keyboard events. It is particularly useful for implementing keyboard shortcuts, form validation, and enhancing user experience by providing real-time feedback about modifier key states like CapsLock.
263 Views
