有没有一种方式可以拥有一个掩码数字输入框？

Question

我正在为Android创建一个HTML5应用程序，在这种特定情况下，我们有一个输入字段，用于信用卡的安全码，我们希望强制该输入字段仅接受数字并且以掩码形式显示。

我已经试图通过研究和自己尝试来寻找解决方法，但没有成功。从我的调查中可以看出，这似乎无法仅通过 HTML5 实现（由于“Number”和“Password”类型都是选项，并且只能使用一个类型）。我是否遗漏了什么，有没有办法在输入被蒙住的同时触发数字键盘，或者通过CSS或JavaScript来强制设置键盘输入类型或掩码？

感谢任何帮助！

- JakeW

---

当你说“纯粹通过HTML5”时，你真的是指“没有JavaScript”吗？ - robertc

如果可能的话，我希望仅使用输入字段的参数；但我也可以使用 JavaScript。我能想到的唯一潜在解决方案是将字段默认为数字类型，并在 JS 中进行聚焦事件更改为密码类型。我还没有测试过它，所以我不确定 Android 如何处理它。 - JakeW

@user1074240，您是否指的是像PIN码一样的字段？如果是，可以使用 password 字段，但需要验证该值必须是数字。 - zzzzBov

robertc 给了我一个解决方案。但是我不能通过 JS 进行验证的原因是，我们希望在设备上弹出数字键盘而不是字母数字键盘。 - JakeW

您的使用webkit-text-security的答案被我们采用了，但是在Android ICS版本（例如Galaxy S3和Galaxy Nexus）中我们遇到了问题。 我还没有找到任何解决方法 :( - saurabh

Answer 1

如果只需要在基于 WebKit 的浏览器中工作，并且 CSS 允许 '纯粹通过 HTML5'，您可以尝试：

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

我不确定其他浏览器是否有类似的东西，未来通过appearance CSS属性可能会被控制。 CSS3版本的appearance已从规范中删除，因此看起来您必须等待text-security标准化以获得跨浏览器解决方案。

- robertc

---

谢谢！这对我的情况非常适用，因为我们只需要在Android上运行。 - JakeW

当然，在iPhone的网页视图（如PhoneGap应用程序）中也可以工作。 - David Conlisk

现在已经过去了将近5年，但我仍然找不到任何更好的解决方案，可以在任何浏览器中运行。所以看来到目前为止还没有标准化的东西？ - Ilya Chernomordik

太棒了！ <input type="number" style="-webkit-text-security:disc;"> 在iOS和Android上都对我有用:D - kuhr

@robertc，在这个方法中，我可以输入数字和“-”。我该如何修复这个错误？ - Pluto