4

私は 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" と同じようには機能しません。パスワード ボックスがフォーカスされていない場合、パスワードがマスクされます。フォーカスされている場合、パスワードはディスクによってマスクされないため、表示されます。

数字キーボードを表示して、パスワードを常にマスクする方法はありますか?

ありがとう。

4

1 に答える 1

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 に別の入力フィールドを追加し、password_mask などの ID を指定します。 <input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>

  2. #パスワード入力欄を隠す
    $("#Password").hide();

  3. jQuery のキーアップ イベントを #password_mask 入力フィールドにバインドして、その入力値を #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();
});
于 2013-07-25T21:10:11.870 に答える