How can I display a verification code with * representing each digit (like a Pass Code)

  • Profile Image
    intranet.admin
    Asked on May 06, 2014 at 03:52 PM

    I would like the user to enter against a text box but not show what they are entering ie display an asterix instead of each digit.

  • Profile Image
    EltonCris
    Answered on May 06, 2014 at 05:45 PM

    Hi,

    Since we do not support password field, the following workaround will help but this only work on webkit based browsers like Chrome. Simply inject this CSS code to your form. How-to-Inject-Custom-CSS-Codes

    #input_3{

    -webkit-text-security: disc;

    text-security: disc;

    }

    Just change #input_3 with the field ID of the field you want to apply password mask. 

    If you want it to work in all browsers, you have to take your form source code and edit the input text type with password. E.g. <input type="password" instead of <input type="text"

    Thanks!

  • Profile Image
    intranet.admin
    Answered on May 08, 2014 at 08:10 AM

    Thank you so much, that works a treat!

  • Profile Image
    ashwin_d
    Answered on May 08, 2014 at 10:02 AM

    Hello,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    jamesforpm
    Answered on September 05, 2014 at 11:52 AM

    Do you know how to achieve this in IE9 using CSS?

  • Profile Image
    david
    Answered on September 05, 2014 at 01:58 PM

    Hi,

    Please create a new thread for new questions.  In this case though, I will just go ahead and answer.  The CSS listed above did work for me across each browser I tried including IE.

    However, for text boxes, simply click on the "Input Mask" button when the field is selected: