input type="tel" 数字输入框显示圆点

Posted 2020-11-01 南方有梦，远方有止

最近开发中遇到一个这样的需求，要求input输入框在手机端出现数字键盘的同时显示圆点，试过各种方法都不太理想，

最终经过查阅大量资料后，终于实现了需求。

●我们一般的密码输入框是这样的：

<input  type="password" placeholder="请输入密码">

这个实现了输入密码显示圆点的需求，但是手机上他调出来的是字母键盘，所以不符合开发需求。

●所以最终的密码输入框是这样的：

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

　　释： -webkit-text-security用法，

　　　　指定用于在密码输入字段中代替字母的形状。

　　　　语法：-webkit-text-security: circle | disc | none | square;

　　　　　　circle：圆形；　　disc：圆盘形状（句号）　　none：没有使用形状；　　square：方形的；

 

版权声明：本文为博主原创文章，转载需注明出处。http://www.cnblogs.com/silent007/p/8947569.html

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