0

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?

Community
  • 1
  • 1
snowrain
  • 422
  • 4
  • 16

1 Answers1

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>
Millhorn
  • 2,953
  • 7
  • 39
  • 77