如何在Android中显示密码字段的数字软键盘

时间:2013-03-06 20:12:50

标签: android cordova

我正在使用PhoneGap开发针对Android的移动项目,并使用三星Galaxy S2 Skyrocket,Android 4.0.4版进行测试。现在我有一个只接受数字密码的html输入字段,所以首先我像这样设置输入

<input type="password" id="Password"/>
它给了我Android中的字母键盘,但我希望显示键盘是数字。

所以我将我的代码更改为
<input type="tel" id="Password"/>并使用CSS来屏蔽密码

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


但是屏蔽与type =“password”的工作方式不同,它会在密码框没有聚焦时屏蔽密码。如果它被聚焦,密码将不会被光盘屏蔽,因此它将被显示。

有什么方法可以让数字键盘显示出来并让密码一直被掩盖?

感谢。

1 个答案:

答案 0 :(得分:1)

我得到了这个修复

密码输入标签位于这样的div中

<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>

所以我通过以下步骤解决了问题:

  1. 在#passwordCell div中添加另一个输入字段,并为其指定一个id,例如password_mask <input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>

  2. 隐藏#Password输入字段
    $("#Password").hide();

  3. 将jQuery keyup事件绑定到#password_mask输入字段,使其将其输入的值传递给#Password字段,并将#password_mask中的输入字符替换为*。
    我这样做是因为最后#Password中的值将作为用户密码发送到服务器

  4. 这是javascript代码,我使用了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();
    });