The getModifierState method of the KeyboardEvent interface is utilized to determine which modifier keys are currently active on the keyboard. This method returns true if any modifier keys are either pressed or released. We can leverage the state of these keys, along with the keyboard event, to trigger specific functions based on the user's input.
Syntax
The syntax employs the JavaScript tag to implement the getModifierState method of the KeyboardEvent interface.
Event_obj.getModifierState(Modifier_Key)
Description: The Modifier_key serves the purpose of simulating a press or click action on the keyboard button.
Key pressed modifiers
Modifier keys work or are triggered when it is activated by pressing down:
- Shift
- AltGraph
- Control
- Meta
Key clicked modifiers
Modifier keys work or are triggered when it is clicked and deactivated:
- NumLock
- CapsLock
- ScrollLock
Examples
The subsequent examples demonstrate the usage of the getModifierState method within the KeyboardEvent interface.
Example 1:
The illustration demonstrates how to identify which key is pressed on the keyboard while also displaying relevant event information. Additionally, we can leverage various keyboard events along with JavaScript functions to retrieve this event data. The keyboard press event specifically highlights and functions with the alt key.
<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method
</title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> Javascript getModifierState() KeyboardEvent Method </h2>
<h4> The altKey Property with JavaScript keydown Method <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the ALT key or not.</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("Alt");
if (event.altKey) {
var1.innerHTML = "The Alt key press successfully with keydown event: "+x_var;
} else {
var1.innerHTML = "The other press (ALT key does not) successfully with keydown event: " +x_var;
}
}
</script>
</body>
</html>
Output
The keydown event shows alt keys functionality.
Example 2:
The illustration demonstrates how to identify which key has been activated on the keyboard and provides details about the shift event. When the shift key is held down, the output displays true; if it is not pressed, the output shows false. The keyboard event captures and responds to the pressing of the shift key.
<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the SHIFT key or not.</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("Shift");
if(x_var == true){
var1.innerHTML = "The Shift key press successfully with keydown event: "+x_var;
}else{
var1.innerHTML = "The Shift key does not press successfully with keydown event: "+x_var;
}
}
</script>
</body>
</html>
Output
The keydown event shows alt keys functionality.
Example 3:
The illustration demonstrates which specific key is triggered when a user clicks on the keyboard and presents the event details pertaining to the number lock. The keyboard event highlights and manages the functionality of the numlock key.
<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the NumLock key or not.</p>
<input type = "text" onkeyup = "keyUPFunction(event)">
<p id = "demos"></p>
<script>
function keyUPFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("NumLock");
var1.innerHTML = "The NumLock key press successfully with keyup event: "+x_var;
}
</script>
</body>
</html>
Output
The keydown event shows alt keys functionality.
Example 4
The illustration demonstrates which key is pressed on the keyboard and provides details regarding capslock events. The keyboard event highlights and manages the functionality of the capslock key.
<!DOCTYPE html>
<html>
<head>
<title> Javascript getModifierState() KeyboardEvent Method </title>
<style>
#demos{
color: green;
}
</style>
</head>
<body>
<h2> JavaScript getModifierState() KeyboardEvent Method
</h2>
<h4> The Shift Key Property with keydown or keypress event <br>
The getModifierState() method does not support IE 8 / Safari 10 and earlier versions </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key. Is the CapsLock key or not?</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
var x_var = event.getModifierState("CapsLock");
var1.innerHTML = "The CapsLock key press successfully with keydown event: "+x_var;
}
</script>
</body>
</html>
Output
The keydown event shows alt keys functionality.
Conclusion
The getModifierState keyboard event is activated when a specific key interacts with the functionality designed for user engagement. This key function is compatible with the web page's events such as key up, key down, and key press.