当将输入标签用作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”类型的输入打开数字键盘.
