移动端密文弹数字键盘

当我们开发移动端页面上的输入框,需要输入密文时,一般我们会用如下方式实现:

当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;"/>

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

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

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



 

posted @ 2019-01-11 20:17  方小川  阅读(298)  评论(0编辑  收藏  举报