Show/Hide Password Mask in Oracle APEX - Javainhand Tutorial

Oracle APEX Tutorial - Show/Hide Password Mask in Oracle Apex

Hello Friends,
In this Oracle APEX Tutorial, I will explain to you how can you add a show/hide password mask in Oracle APEX. I have already uploaded a video on youtube.

In our scenario, we have an eye icon at the end of the password input field. Password mask by default and when you click on the eye icon you will see what's the behind the certain as again click on eye icon password will be masked.

Let's Start to follow below steps:-
Basically, We have implemented this scenario on the login page.

Step 1:- Go to Password Item and Add the below code into Post Text Section.

<i id="pass-status" class="fa fa-eye field-icon" aria-hidden="true" onClick="viewPassword()"></i>

Oracle APEX Tutorial - Show/Hide Password Mask in Oracle Apex

Step 2:- Now Creating a Javascript Function which is called on icon click event below code will help you.

function viewPassword()
  var passwordInput = document.getElementById('P101_PASSWORD');
  var passStatus = document.getElementById('pass-status');

  if (passwordInput.type == 'password'){
    passStatus.className='fa fa-eye-slash field-icon';
    passStatus.className='fa fa-eye field-icon';

Oracle APEX Tutorial - Show/Hide Password Mask in Oracle Apex

As you have seen the above screenshot and code used in the Page Function and Global Variable Declaration Section.

Step 3:- Last and final Step Use below CSS code into Page Inline Section.

.field-icon {
    right : 30px;
    margin-left: -25px;
    margin-top: 14px;
    position: relative;
    z-index: 2;

That's all for today I think this Show/Hide Password Mask 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.

Watch Show/Hide Mask Video Tutorial in Oracle APEX:-

Post a Comment


If you have any doubts, Please let me know