how to detect CapsLock button on custom login page

0
Hi I am trying to implement some Javascript to detect if a caps lock button is enabled, however the input Id for the Mendix textbox is constantly changing.   How do I configure javascript to detect a capslock with mendix?     P.S- the HTML is just for the message.. Full code below…  HTML Snippet: <div id="capslock-message" style="display: none;color: red;">Caps lock is on!</div>   JavaScript Snippet: function checkCapsLock(event) { var capsLockOn = false; if (event.getModifierState("CapsLock")) { capsLockOn = true; } return capsLockOn; } document.getElementById("#\\32 5\\.Login\\.LoginPage_Dealer\\.textBox3_dpc_33").addEventListener("keydown", function(event) { var capsLockOn = checkCapsLock(event); var message = document.getElementById("capslock-message"); if (capsLockOn) { message.style.display = "block"; } else { message.style.display = "none"; } }); Pics:  In the picture below is the 2 different JS paths, selectors, and elements, copied from my brower developer tools on the page I am working on. As you can see the Input ID is different for the same text box in two different instances.    And finally the error I am receiving..  
asked
2 answers
3

Hi,

 

Instead using id use class name of your password text box

 

var input = document.getElementsByClassName("password text box");
var text = document.getElementById("capslock-message");

input[0].addEventListener("keyup", function(event) {

if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});

answered
0

Accepted answer is above but this is what i did for anyone in the future. I defined the class here in the properties and updated the code. 

I also didnt have [0], in my original code which was why it was throwing an error : 

document.getElementsByClassName("passwordBox")[0].addEventListener("keydown", function(event) {

 

answered