I would like to change the password input to display a numerical keypad (the same as type="number"
does).
<input type="password" pattern="[0-9]*" inputmode="numeric">
but this does not work with IE. Is it possible to do this with another method?
I deleted my previous answer, because as @IsmaelMiguel said, it wasn't helpful. Here's an implementation of what he suggested in the comments. If anyone feels like upvoting this please upvote his comment too.
Overlay a transparent type=number
field on the password field.
<div style="position:relative;">
<input id="mask" type="number" pattern="[0-9]*" inputmode="numeric" style="position:absolute;opacity:0;" />
<input id="pin" type="password" />
</div>
jQuery is used to pass the value from the number field to the password field
$(function(){
$("#mask").on("keyup", function (e) {
$("#pin").val($("#mask").val());
});
});
I've tested this and it works in IE11 on Windows 8.1. The only issue with it is the cursor is invisible, since the mask is always selected.