Show numeric keyboard on mobile in password input type

Question

I want to make

<input type="password">

to display numeric keyboard only on mobile devices (iOS/Android).

I have seen solutions like:

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

But I cannot use this because of security and accessibility. Input value will be visible in inspector and voice over reads the numbers out loud.

Is there a way to achieve hidden input with numeric keyboard and proper accessibility?

Answer 1

Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">

Updated Answer:

Put a couple more minutes of thought into this. I've got it (and tested).

 /* 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>