Open In App

Javascript | MouseEvent getModifierState() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The mouseEvent getModifierState() is used to return the state of specified modifier key which is being held down when the event occurs. It returns true if the specified modifier key is pressed ans false if it is not pressed.

  • The following modifier keys are activated when only they are pressed down: Alt, Control, Meta, Shift.
  • There are also some modifier keys that are activated when they are clicked, and deactivated when they are clicked again: CapsLock, ScrollLock and NumLock.

Syntax:

event.getModifierState(key)

Parameters:

  • key: It refers to the modifier key. It is case sensitive.

Return Value: It returns a boolean value that indicates whether the specified modifier key is activated or not.

  • true: it indicates that the specified modifier key is pressed or activated.
  • false: it indicates that the specified modifier key is not pressed.

Example: In this example if CapsLock is activated then true will be displayed, otherwise, false. To see the effect click on the input element after switching CapsLock on/off.




<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Mouse Event</title>
    </head>
    <body style = "text-align:center;">
      
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            mouseEvent getModifierState() Method
        </h2>
   
        Input: <input type="text" onmousedown="geek(event)">
          
        <p id="p"></p>
          
        <script>
        function geek(event) {
          var doc = event.getModifierState("CapsLock");
          document.getElementById("p").innerHTML = "Caps Lock activated: " + doc;
        }
        </script>
    </body>
</html>


Output:
CapsLock Off (initially):
modifier
CapsLock On:
modifier

Supported Browsers: The browser supported by getModifierState() method are listed below:

  • Apple Safari 10.1
  • Google Chrome 30.0
  • Firefox 15.0
  • Opera 17.0
  • Internet Explorer 9.0


Last Updated : 07 Jan, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads