input type="tel" number input box displays dots

In the recent development, I encountered such a requirement, which requires the input box to display dots while the number keyboard appears on the mobile phone. I have tried various methods and it is not ideal.

Finally, after consulting a lot of information, the demand was finally realized.

●Our general password input box is like this:

<input type="password" placeholder="Please enter password">

This achieves the requirement of entering the password to display the dots, but the one on the mobile phone is the alphabetic keyboard, so it does not meet the development requirements.

● So the final password input box looks like this:

<input type="tel" maxlength="6" style="-webkit-text-security:circle"  placeholder="请输入密码">

  Explanation: -webkit-text-security usage,

    Specifies the shape to use in place of letters in the password input field.

    grammar:-webkit-text-security: circle | disc | none | square;

      circle: round;  disc: disc shape (period)  none: no shape used;  square: square;

 

Copyright statement: This article is an original article by the blogger, and the source must be indicated for reprinting. http://www.cnblogs.com/silent007/p/8947569.html

***************************************   END   *******************************************

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324886617&siteId=291194637