javascript - How to make input type="tel" work as type="password"

Question

When using the input tag as type="tel" the keyboard on touch devices correspond with the type of input box. However, I wish to keep the value in the input tag hidden (as with the password type). The normal behaviour would be to have each character hidden as the user is typing.

<input type="tel">

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

This solution works in most browsers, but not in IE.

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

This solution doesn't work as expected.

Is there any way to accomplish what i'm trying to do?

Answer 1

Update 2020-06-19

If all you're after is better usability for "pin" inputs, I'd now suggest sticking with the inputmode attribute that didn't work for OP in 2016. The browser support is still quite limited, but it's finally working at least on iOS Safari and as a solution it's much simpler and possibly more secure than avoiding input type="password" altoghether.

<input type="password" inputmode="tel" />