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

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>