html - Input Type="Password" にする モバイル デバイスで数字パッドを使用する

Question

モバイル デバイス用に設計された私のサイトには、PIN 番号に使用される入力フィールドがあります。入力時にテキストを非表示にし、モバイル デバイスのユーザーが PIN を入力するときに数字パッドをポップアップ表示するようにします。Type="Number" の場合は数字パッドがポップアップしますが、Type="Password" の場合は表示されず、Type="Number and Password" を設定できません (または設定方法がわかりません)。

何か案は？

前もって感謝します！

Answer 1

「pattern」や「inputmode」などの単純な方法は、Android でも IOS でも機能しないため、CSS と JavaScript を使用して以下の回避策を実装しました。

https://jsfiddle.net/tarikelmallah/1ou62xub/

HTML

 <div>
  <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4"  tabindex="-1">
  <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone"
         tabindex="5">
</div>

JavaScript

$().ready(function(){
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) {
  $('#pass').val($('#passReal').val());
  console.log( event );
});
$( "#pass" ).focus(function() {
  $('#passReal').focus();
});

  });

スタイル：

input#passReal{
  width:1px;
  height:10px;
}
input#pass {
    position: absolute;
left:0px;
}

Androidエミュレーターからのこの画像：