Caps Lock On/Off indicator in Oracle APEX

-

 

In this post I will be explaining how to show Caps Lock On/Off indicator in Oracle APEX.

Follow the below steps to achieve this:

1) Create a Page Item (Type of the item is Password).

     Item Name: P33_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();
        }  
    }  
};

password.addEventListener('keyup', capsLockCheck, false);
password.addEventListener('mousedown', capsLockCheck, false);


Note: Use the item name in your page instead of  P33_PASSWORD



Click here for DEMO


Happy CODING!!!

Thank you

Comments

  1. Sasha GomanukeJuly 21, 2021 at 5:43 AM

    Hi.
    Appreciate for Your sharing!
    But i just got

    Uncaught TypeError: event.getModifierState is not a function
    at HTMLInputElement.capsLockCheck

    ReplyDelete
    Replies
    1. Akil RJuly 26, 2021 at 5:52 AM

      Hello. I had to make a small change in line number 3 of the JavaScript code. Can you please try to copy paste the the JavaScript Code now and test if it working fine

      Delete
  2. Sasha GomanukeJuly 27, 2021 at 2:07 AM

    The matter is in var element =

    Please, add in Your instruction a step with placing id="caps-lock-div" in Post Text section of P33_PASSWORD

    ReplyDelete
    Replies
    1. Akil RJuly 28, 2021 at 4:02 AM

      This comment has been removed by the author.

      Delete
    2. Akil RJuly 28, 2021 at 4:04 AM

      Hey Sasha, I have tested the above JavaScript code. It works fine for me. Please see the DEMO.

      If you put the code in the Item post text section, the message will be displayed to the right of the Item(not below), which most of the users do not prefer. That is why I have chosen this approach.

      Delete
  3. Sasha GomanukeJuly 28, 2021 at 7:28 AM

    Thank You for sharing.

    ReplyDelete

Post a Comment

Popular posts from this blog

Display and Edit CLOB Content in Oracle APEX

-
Image
In this post I will be explaining how to display  and edit a CLOB content in Oracle APEX.  Please follow the below steps: 1) Create a table T_EMPLOYEE CREATE TABLE T_EMPLOYEE ( EMP_ID NUMBER, EMP_NAME VARCHAR2(100), DESCRIPTION CLOB ); 2) Insert the required data into the T_EMPLOYEE table.                           3) Create a page in the application.  (In this example Page - 5) 4) Create another page with the Page Mode as Modal Dialog (In this example Page - 6)   5) Create a region and two items in Page - 6. The Items are:     P6_EMP_ID -> Type -> Hidden  (Value Protected: No)     P6_EMP_DESCRIPTION ->   Type  ->  Text Area   (or) Rich Text Editor 6) Now navigate back to Page - 5 and create a Region ( Type -> Interactive Report ) 7) Paste the below code in the Source -> SQL Query of the I...
Read more

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX

-
Image
In this blog I will be explaining how to restrict users from typing only numbers/decimal values in a Number/Text Item in Oracle APEX. 1) Create a Region .    2) Create an Item in the page (Type: Text Field or Number Field ). 3) To allow only Numbers, paste the below code in the Page ->  Execute When Page Loads Section . $("#P30_NUMBER_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; var charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; });   Note: Replace P30_NUMBER_FIELD_ITEM with your Item name. 4) To allow only Decimal values, paste the below code in the  Page  ->  Execute When Page Loads Section . $("#P30_DECIMAL_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; if ( event.which != 0 && (event.which < 48 || event.whic...
Read more

Copy the value of an Item to Clipboard in Oracle APEX

-
APEX does not provide an inbuilt functionality to copy the value of a page item to clipboard . Use my plug-in Copy To Clipboard to achieve or if it has to be achieved via code p lease follow the below steps :- For visible Items: 1) Create an  Item in the APEX page. (In this example the Item is P1_ITEM) 2) Create a button. (In this example the button is P1_COPY) 3) Create a Dynamic action          Event:  Click         Selection Type:  Button         Button:  P1_COPY 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*to select the text field*/ $("#P1_ITEM").select(); /*to copy the text inside the text field*/ document.execCommand("copy"); /*to show success message (Optional)*/ apex.message.showPageSuccess('Copied to Clipboard!'); For hidden Items: Step 1,2 and 3 i...
Read more