input type="tel" 输入框显示密文

Posted 2021-01-31 wxcbg

为了在移动端实现密码输入框且调起的键盘为数字键盘，可以用-webkit-text-security:disc;text-security:disc;属性来实现。

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

none 无。
circle 圆圈。
disc 圆形。
square 正方形。

 

//当type="password"时，输入框显示为圆点，调起的是英文键盘，而不是我们想要的数字键盘
<input type="password" placeholder="password"/>

//当type="number" 或者 type="tel" 时，想要输入框显示圆点密文，同时调起数字键盘

 

<input type="tel" placeholder="tel" placeholder="tel" style="-webkit-text-security:disc;text-security:disc;"/>