时间戳

首页 > 解决方案 > 以密码输入类型在手机上显示数字键盘

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

问题描述

我要实现

<input type="password">

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

我见过这样的解决方案：

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

但由于安全性和可访问性，我不能使用它。输入值将在检查器中可见，并且语音会大声读出数字。

有没有办法通过数字键盘和适当的可访问性实现隐藏输入？

标签： javascripthtmlcssangular5

解决方案

尝试这个...<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>

推荐阅读