Javascript | MouseEvent getModifierState() Method

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.