android - 如何在 Android 中为密码字段显示数字软键盘

Question

我正在使用 PhoneGap 为 Android 开发一个移动项目，并使用 Samsung 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"的工作方式不同，它会在密码框未获得焦点时屏蔽密码。如果它获得焦点，密码将不会被光盘屏蔽，因此会显示出来。

有什么办法可以让数字键盘一直显示并让密码一直被屏蔽？

谢谢。

Answer 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. 为#password_mask 输入字段绑定(bind)一个jQuery keyup 事件，使其将输入的值传递给#Password 字段，并将#password_mask 中输入的字符替换为*。
   我这样做是因为最后#Password 中的值将作为用户密码发送到服务器

这是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();
});