javascript – 如何使输入type =“tel”工作为type =“password”

当将输入标签用作type =“tel”时,触摸设备上的键盘与输入框的类型相对应.但是,我希望保留输入标签中的值(与密码类型一样).
正常的行为是让用户在打字时隐藏每个角色.

<input type="tel">

input [type="tel"] {
    -webkit-text-security: disc;
}

该解决方案适用于大多数浏览器,但不适用于IE.

<input type="password" pattern="[0-9]*" inputmode="numeric">

此解决方案无法正常工作.

有没有办法完成我想要做的事情？

解决方法

我知道这已经有一个很好的,工作和接受的解决方案从jdgregson,但我真的很喜欢rybo111的基于自定义字体的解决方案的想法,并想试一试.

这个想法是创建一个只包含圆形的字体,以便当字体系列应用于输入元素时,似乎没有显示任何字符.

因此,如果任何人仍然对decent browser support的非JS解决方案感兴趣,并且没有jdgregson答案的已知问题,我为此创建了一个简单的字体.

GitHub回购：https://github.com/noppa/text-security

JSfiddle演示：https://jsfiddle.net/449Lamue/6/

可以通过将来自克隆的repo或RawGit或类似的东西包含在dist / text-security.css中来使用该字体.包含css后,您可以通过将元素的font-family设置为“text-security-disc”来使用该字体.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<style>
     input [type="tel"] {
         font-family: "text-security-disc";
         -webkit-text-security: disc;
     }
</style>

本着“polyfilling”的-webkit-text-security的精神,我还添加了“circle”和“square”选项作为隐藏符号.

我已经使用Chrome v49,IE11,Microsoft Edge 25和Android 5.0上的Chrome v50进行了测试,其中“tel”类型的输入打开数字键盘.

javascript – 如何使输入type =“tel”工作为type =“password”

解决方法

相关文章