Показывать цифровую клавиатуру на мобильном телефоне в виде ввода пароля

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>