I was creating a user master entry screen in Oracle Apex and for a password field, I specified its type as Password. And when I was opening that screen at runtime, it was showing me the existing username and password stored in my Google Chrome browser, which was not required at the time of data entry. I tried a lot to sorted out this issue, but it didn't and became very irritating. Then I started looking for some other way and found the best way to mask the password using the CSS -webkit-text-security property. In this tutorial, I will show you how to mask the password using CSS in Oracle Apex.
Mask Password Using CSS -webkit-text-security Property in Oracle Apex
First, set the type of the password field as a Text Field in Oracle Apex. In my page for this example, the item name is P36_PASSWORD.
Example -1: Mask the password as Round Disc
Now copy the below CSS code and paste into the page inline CSS section as shown in the below image:
#P36_PASSWORD { -webkit-text-security: disc;}NOTE: Change the P36_PASSWORD with your page password item.
Save the changes and run the page to test. The output would be as shown in the below image:
It will mask the password as Disc and stores the actual value you entered for the field. You can also change the mask symbol as a circle, square, etc. The following are the examples:
Example -2: Mask The Password as Circle Using CSS
To display a Circle for a password character, use the circle value for the -webkit-text-security CSS property.
#P36_PASSWORD { -webkit-text-security: circle;}Output:
Example -3: Mask the Password as Square Using CSS
To display a Square for a password character, use the circle value for the -webkit-text-security CSS property.
#P36_PASSWORD { -webkit-text-security: square;}Output:
I think the Password Type field is good for the login screens in Oracle Apex and for the data entries, this method is good.
Related Tutorials:
- Oracle Apex: Set Number Format and Allow Numbers Only Using autoNumeric.min.js
- Oracle Apex: Set Default Value for an Item
- CSS Style for Links – Thick Underline and Highlight Text on Mouse Hover
