Overview
This document explains how to show Caps Lock On/off Indicator 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.
Technologies and Tools Used
The following technologies have been used to achieve this in oracle apex.
- Oracle Apex 21.1,
- Java script.
Steps
Follow the below steps to achieve this:
1) Create a Page Item (Type of the item is Password).
Item Name: P30_PASSWORD (Use the item name in your page instead of this)
2) Paste the below CSS code in the Inline Section
#caps-lock-div{
color:rgb(250, 76, 76);
font-size: 1.3rem;
line-height: 2rem;
}
3) Paste the below JavaScript code in the Function and Global Variable Declaration section.
var password = document.getElementById(“P33_PASSWORD”);
var $password = $(“#P33_PASSWORD”).parent().parent();
var element = ‘<span id=”caps-lock-div” class=”fa fa-warning”> CapsLock key is on!</span>’;
var capsLockCheck = function (event) {
let $element = $(‘#caps-lock-div’);
if (event.getModifierState(“CapsLock”)) {
if($element.length == 0){
$password.append(element);
}}
else {
if($element.length){
$element.remove();}
} };
Output:
