在手机上以密码输入类型显示数字键盘

Question

我想做

<input type="password">

仅在移动设备（iOS / Android）上显示数字键盘。

我见过类似的解决方案：

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

但是 由于安全性和可访问性，我无法使用它。输入值将在检查器中可见，并且旁白会大声读出数字。

是否可以通过数字键盘和适当的辅助功能来实现隐藏输入？

Answer 1

尝试一下... <input type="password" pattern="[0-9]*" inputmode="numeric">

更新后的答案：

再花几分钟思考一下。我已经知道了（并进行了测试）。

/* Requires discs as characters */
input[type="number"] { 
  -webkit-text-security: disc !important; 
}

/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

<div style="text-align: center;">
  <label for="pin" class="my-1 mr-2 strong">Password</label>
  <input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off"> 
</div>