How to show numeric soft keyboard for password field in Android

Question

I'm working on a mobile project for Android using PhoneGap, and testing with Samsung Galaxy S2 Skyrocket, android version 4.0.4 . Right now I have a html input field that only accepts numeric password, so first I set the input like this

<input type="password" id="Password"/>
it gives me the alphabetical keyboard in Android, but I want the show up keyboard to be numeric.

So I change my code to be
<input type="tel" id="Password"/> and use CSS to mask the password

<style type="text/css">
        #Password {
            -webkit-text-security: disc;
        }
</style>

but the masking is not working same as the type="password", it will mask the passwords when the password box is not getting focused. If it is getting focused, password will not be masked by disc, so it will be shown.

Is there any way I can make the numeric keyboard shown and let the password to be masked all the time?

Thanks.

sorry Whizkid747, this is the first time i post a question, so I post the question for saving purpose, it's completed now. — Jerry Wu, Mar 06 '13 at 20:30
How about #Password input[type=number] { -webkit-text-security: disc; } — Nishanth Nair, Mar 06 '13 at 22:51
see this: http://stackoverflow.com/questions/2420181/android-numeric-password-field — lucasddaniel, May 14 '13 at 01:41
It's perfectly working for My requirement. Android keyboard display numberic keyboard for my password feild — gnganapath, Mar 25 '15 at 10:20

Jerry Wu · Accepted Answer · 2013-07-25T21:23:19.320

I got this fixed

The password input tag is in a div like this

<div id="passwordCell" style="display:inline;">
    <input type="password" pattern="[0-9]*" name="Password" id="Password" placeholder="4 digit numeric only allowed" maxlength="4"/>
</div>

So I solved the the problem in the following steps:

add another input field in the #passwordCell div, and give it an id, for example, password_mask <input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>
hide the #Password input field
$("#Password").hide();
bind a jQuery keyup event to #password_mask input field to make it pass its inputed value to #Password field, and replace the inputed character in #password_mask with *.
I do this because at the end the value in #Password will be sent to server as user's password

Here's the javascript code, I used jQuery

$("#passwordCell").html('');
$("#passwordCell").append('<input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>' +
                            '<input type="password" pattern="[0-9]*" name="Password" id="Password" placeholder="4 digit numeric only allowed" maxlength="4" data-validation-required="true" data-validation-pattern="pin not_empty"/>');
$("#password_mask").textinput();
$("#Password").textinput();
//$("#password_mask").show();
$("#Password").hide();
$("#password_mask").keyup(function() {
    var inputLength = $(this).val().length;
    var passwordLength = $("#Password").val().length;
    if (inputLength > passwordLength) {
        var inputLastChar = $(this).val().charAt(inputLength-1);
        $("#Password").val($("#Password").val() + inputLastChar);
    } else {
        $("#Password").val($("#Password").val().substring(0, $(this).val().length));
    }

    var i = 0;
    var maskPassword = "";
    while (i < $("#password_mask").val().length) {
        maskPassword += "*";
        i++;
    }
    $("#password_mask").val(maskPassword);
});
$("#password_mask").blur(function() {
    $("#Password").focus();
    $("#Password").blur();
});

How to show numeric soft keyboard for password field in Android

1 Answers1

Linked