Javascript getModifierState() KeyboardEvent Method

Javascript getModifierState() KeyboardEvent uses to know which keypresses are on the keyboard. The event returns true if modifiers keys are pressed or clicked off the keyboard. We can use the pressed, clicked key, and the keyboard event activates the function.

Syntax

The syntax uses the javascript tag to use getModifierState() KeyboardEvent.

Description: Modifier_key is used to press or click the keyboard button.

Key pressed modifiers

Modifier keys work or are triggered when it is activated by pressing down:

Alt
Shift
AltGraph
Control
Meta

Key clicked modifiers

Modifier keys work or are triggered when it is clicked and deactivated:

NumLock
CapsLock
ScrollLock

Examples

The following examples show the getModifierState() KeyboardEvent with methods.

Example 1:

The example shows which key is pressed from the keyboard and shows event information. We can use other keyboard events and javascript functions to get event information. The keyboard press event shows and operates the alt key button.

<!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.

Javascript getModifierState() KeyboardEvent Method

Example 2:

The example shows which key is pressed from the keyboard and shows shift event information. If the shift key is pressed down, the output shows true otherwise false. The keyboard event shows and operates the shift press button.

<!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 example shows which key onclick from the keyboard and shows number lock event information. The keyboard event shows and operates the numlock button.

<!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 example shows which key is down from the keyboard and shows capslock events information. The keyboard event shows and operates the capslock button.

<!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 works when the particular key operates with the function for the user interactive functionality. The key function works with the web page's up, down, and Press events.

Next TopicJavaScript only Number Regex

← prev next →