如何显示数字软键盘在Android电子密码字段 [英] How to show numeric soft keyboard for password field in Android

问题描述

我正在使用的PhoneGap为Android手机项目，并与三星Galaxy S2热卖，Android版本4.0.4测试。现在我有一个只接受数字密码的HTML输入字段，所以首先我这样设置输入


＆LT;输入类型=密码ID =密码/＆GT;

它给了我在Android的字母键盘，但我想秀达键盘是数字。


所以，我改变我的code被

＆LT;输入类型=电话ID =密码/＆GT; 和使用CSS

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?

感谢。

推荐答案

我得到了这个固定

密码输入标签是在这样一个div

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:

1. 添加在#passwordCell DIV另一个输入字段，并给它一个ID，例如，password_mask
   ＆LT;输入类型=电话NAME =password_maskID =password_mask占位符=4位数字只允许。 MAXLENGTH =4/＆GT;

隐藏#password口令输入字段

$（＃密码）隐藏（）;

hide the #Password input field
$("#Password").hide();

绑定一个jQuery keyup事件到#password_mask输入字段使它通过它inputed价值#password口令领域，并将其替换已输入字符#password_mask *。
我这样做是因为在年底#password口令值将以用户的密码被发送到服务器

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

下面是JavaScript的code，我用jQuery的

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

这篇关于如何显示数字软键盘在Android电子密码字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！