Angular JS ui-mask with type=“password”

I am developing an app with input field, and for pattern using angular js ui-mask.

HTML

<input type="tel" class="input-field " data-ng-model="registrationField.debitcard" ui-mask="9999    9999    9999    9999" placeholder="Enter ATM/Debit Card Number"  ui-mask-placeholder ui-mask-placeholder-char="space" id="debitCardFld" ui-options="{clearOnBlur: false}"/>
  1. With type="text" the code works fine.
  2. But when we use type="password", on focus of the field, the spaces in pattern is also masked.

Only when the user types, it has to mask the characters.

Is there any way to achieve it?

Ref: https://github.com/angular-ui/ui-mask

Answer

You can make a fake password input with type text using a custom font:

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://sites.google.com/site/rafaelcastrocouto/download/password.ttf);
}

input.key {
  font-family: 'password';
  width: 100px; height: 16px;  
}

Notice that this only raises more security concerns. good luck !

Leave a Reply

Your email address will not be published. Required fields are marked *