私はこれを修正しました
パスワード入力タグは、このように 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>
そこで、次の手順で問題を解決しました。
#passwordCell div に別の入力フィールドを追加し、password_mask などの ID を指定します。
<input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>
#パスワード入力欄を隠す
$("#Password").hide();
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();
});