如何将输入框的类型设置为数字和密码同时兼备？

Question

我知道这个：

<input type="tel">

我知道这一点：

<input type="password">

但是我想同时使用这两个功能。我希望在iOS（具体地说）上出现数字键盘，但在输入后隐藏每个字符。是否可能实现这样的功能？

<input type="tel|password">

- kaleazy

---

这应该是你正在寻找的：https://dev59.com/kmsy5IYBdhLWcg3wxAyO#8334379。 - uadrive

Answer 1

对于iOS设备，您可以将输入类型设置为“password”，并仍然使用HTML5属性“pattern”触发数字键盘：

<input type="password" pattern="[0-9]*" ... />

从苹果文档中得知：

要显示数字键盘，请将pattern属性的值设置为 "[0-9]" 或 "\d"。

- marco

---

这个答案被低估了，而且是在iOS中实现所要求的功能的更好方法。 - LP Papillon

很不幸，它在安卓上无法运行。 - SILENT

这在至少iOS9中无法实现。将类型设置为密码会使图案和输入模式属性无效。 - cduguet

我尝试了这个，但是不起作用，模式为“[0-9]*”，输入模式为“numeric”。 - Mark Thien

Answer 2

输入框的HTML代码:

<input type="tel" name="password" id="password" value="" placeholder="Enter password"
    onfocus="changeToPassword()">

Javascript:

// change the type of the input to password
function changeToPassword() {
    setTimeout(function () {
        document.getElementById("password").setAttribute("type", "password")
    }, 500);
}

这个解决方案适用于iPhone。这是一种比较trick的方法。在接下来的500毫秒内，一旦你有了数字键盘，你就可以将属性更改为password，这样就能欺骗手机。

- Tono Nam

---

无法再次使用。 当有人输入信息并模糊并尝试重新输入信息时，现在类型已设置为密码，数字键盘将不会出现。 - Fyre

Answer 3

你可以将输入类型设置为密码，然后使用JavaScript在提交按钮被按下时验证只有数字被输入。 http://www.configure-all.com/javascript_form_validation.php

- Alex Datcu

---

这也是我的答案，但似乎OP想要启用一些iOS特定的UI功能，通常由type="tel"触发。我认为JS输入验证对此无济于事。 - Ilmari Karonen

答案链接已失效。有哪些更新的链接可以提供帮助？ - Whitecat