Skip to content
Related Articles

Related Articles

Javascript | MouseEvent getModifierState() Method

Improve Article
Save Article
  • Last Updated : 07 Jan, 2019
Improve Article
Save Article

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.




  • 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>
        <title>JavaScript Mouse Event</title>
    <body style = "text-align:center;">
        <h1 style = "color:green;">
            mouseEvent getModifierState() Method
        Input: <input type="text" onmousedown="geek(event)">
        <p id="p"></p>
        function geek(event) {
          var doc = event.getModifierState("CapsLock");
          document.getElementById("p").innerHTML = "Caps Lock activated: " + doc;

CapsLock Off (initially):
CapsLock On:

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
Related Articles

Start Your Coding Journey Now!