web-dev-qa-db-ja.com

入力タイプを「パスワード」にして、モバイルデバイスの番号パッドを使用する

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

何か案は？

前もって感謝します！

htmlmobileinputpasswordsnumbers
36
JT Nolan

一部のブラウザー（iOS）は、特定の pattern 属性値[0-9]*トリガーテンキーとして。

HTML 5.1ドラフトには、入力の特定の問題に対処するために設計された inputmode 属性が含まれていますモード（キーパッドなど）を選択しますが、まだ実装されていません。

ただし、現在のHTML 5.1ではtype=password、奇妙な理由があります。

<input type="password" pattern="[0-9]*" inputmode="numeric">
31
Jukka K. Korpela

最後に、私は答えを見つけました here ：

input[type=number] {
    -webkit-text-security: disc;
}

（WebKitベースのブラウザーでのみ機能します）

35
Mati Tucci

「パターン」と「入力モード」を使用するなどの簡単な方法は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 emulator：

enter image description here

4
Tarek El-Mallah

Type = "tel"を使用し、CSSマスク "disc"はmeで動作しますが、パスワードマネージャー（LastPassなど）はtype = "で入力する必要がありますパスワード」を入力して作業を開始します。

したがって、私の考えは、入力タイプをデバイスに応じて変更することです。 hisorangeによるブラウザ検出（Laravelの場合） ：デスクトップの場合は「パスワード」タイプ、モバイルデバイスの場合は「tel」タイプを使用しました。

CSS：

.password-mask {
        -webkit-text-security: disc;
        -moz-webkit-text-security: disc;
        -moz-text-security: disc;
    }

コントローラ：

 if (Browser ::isMobile() || Browser ::isTablet()) {
    $device = 'm';
 } else {
    $device = 'd';
 }

刃：

<input type="{{$device=='d' ? 'password' :'tel'}}" 
pattern="[0-9]*" 
class="form-control password-mask {{$errors->has('password') ? 'invalid' :''}}"
autocomplete="current-password" id="password" name="password">
1
Lipa

入力をtype="number"で設定し、jQueryを使用して、入力のキーダウン後にタイプを変更しないのはなぜですか。

$("input").keydown(function () {
    $(this).prop('type', 'password');
});

その後、間違いを犯した場合。入力をクリアし、type="number"をもう一度設定できます。

$("input").click(function () {
    $(this).val('');
    $(this).prop('type', 'number');
});

これが私の最初の答えであり、私が助けてくれたことを願っています。

1
damalga

または、javascriptとCSSを使用して独自のキーボードを作成し、ユーザーが数字を入力したときにbisplay *し、javascript変数に値を保存することもできます。私がやっただけで、ユーザーのログインが非常にスムーズで簡単になります...最初にモバイル

0
Jayo2k