CapsLock(On/Off) Indicator with Javascript in Oracle APEX- Javainhand Tutorial

 In this post, We explore the Caps Lock(On/Off) Indicator with Javascript in Oracle APEX.

Sometimes it is necessary to check whether caps lock is on or off. Capslock(on/off) indicator functionality is useful on the login page. Sometimes user not realized this, caps lock is on or off and that is why he enter wrong password.Due to enter wrong password user getting locked.

If We inform or alert to user that caps lock is on then user will not getting locked.

Click here for demo

CapsLock(On/Off) Indicator with Javascript in Oracle APEX

Now, I am sharing all details which will help to implement CapsLock(On/Off) Indicator functionality with JavaScript in Oracle APEX.Please follow the all below details.

Step 1:- Go to the your application login region and find footer text section.After finding the footer text copy the below html code and paste into the footer text section.

<span id="caps-lock-on">Note : Your CapsLock key is currently turned on</span>

Step 2:- Now Add some Inline CSS for display message with style.find out the below CSS Code will help you. 

#caps-lock-on {
	font-size: 12px;
	font-weight: 700;
	margin: -10px 0 0 0;
	color: #c0392b;
	display: none;
}

Step 3:- Add JavaScript Code to identify the keyboard event and alert user that your Keyboard CAPS LOCK is on.Find out the below JavaScript code in your page Function and Global Variable Declaration Section.

var input = document.getElementById("P9999_PASSWORD");// Pass Your Item Name
var text = document.getElementById("caps-lock-on");

//WHEN KEYUP
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});

//WHEN MOUSEDOWN
input.addEventListener("mousedown", function(event) {
if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});

I am Displaying CAPS Lock message when keyup and Mouse down. Based on your requirement, you can add more event.

That's all for today I think this CapsLock(On/Off) Indicator with Javascript in Oracle APEX post will helpful for you. If you like this post then share your view in the comment box. Also, Share this post with your friends and also share in the oracle apex related group.