Angular JS ui-mask with type=“password”

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


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



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(;

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 *