Show/Hide Password Mask in Oracle APEX - Javainhand Tutorial

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>

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'){

    passwordInput.type='text';

    passStatus.className='fa fa-eye-slash field-icon';

    

  }

  else{

    passwordInput.type='password';

    passStatus.className='fa fa-eye field-icon';

  }

}

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:-