如何在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"不同，它只会在密码框未获得焦点时掩盖密码。如果密码框获得了焦点，则密码将不会被掩盖，因此它将被显示出来。

有没有办法让数字键盘一直显示，并始终掩盖密码？

谢谢。

- Jerry Wu

---

抱歉，Whizkid747，这是我第一次发布问题，所以我为了保存目的而发布了问题，现在已经完成了。 - Jerry Wu

如何处理 #Password input[type=number] { -webkit-text-security: disc; } - Nishanth Nair

@Whizkid747 实际上，这并不掩盖密码。 - Jerry Wu

请查看以下内容：https://dev59.com/tnE95IYBdhLWcg3wMa51 - lucasddaniel

它完美地满足了我的需求。Android键盘为我的密码字段显示数字键盘。 - gnganapath

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位数字。" maxlength="4"/>

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

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

这是我使用 jQuery 的 JavaScript 代码：

$("#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();
});

- Jerry Wu