Clever Geek Handbook

Enter input type = "Password". Use number pad on mobile with IE

I would like to change the password input to display the numeric keypad (same as type="number"

).

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

but that doesn't work with IE. Can this be done with a different method?

+3


source to share


1 answer


I deleted my previous answer because as @IsmaelMiguel said it didn't help. Here is an implementation of what he suggested in the comments. If anyone feels that this will help, please refrain from commenting.

Overlay a transparent field type=number

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 numbers field to the password field



$(function(){
    $("#mask").on("keyup", function (e) {
        $("#pin").val($("#mask").val());
    });
});

I have tested this and it works in IE11 on Windows 8.1. The only problem with this is the invisible cursor as the mask is always selected.

Demo

0


source






More articles:


All Articles