Open1

<input type="password">でテンキーを表示したいとき(モバイル)

index.html
<input type="password">

の入力フォームはモバイル端末だとデフォルトでは英数字キーボードが表示されます。

しかし、パスワードを数字に限定したい場合には英数字キーボードが出てくると邪魔です。

テンキーを出すのは<input type="number">ですが、パスワード入力欄に<input type="password">以外を使うわけにはいきません。

そこで、<input type="number">を使わずにテンキーだけを表示させるには、inputmode属性を使います。

このinputmode属性を指定することで、type属性にかかわらずデータ型を明示することができます。

今回は数字を入力させたいので

index.html
<input type="password" inputmode="numeric">

こうするとフォームの入力時にテンキーが出てきます。numericを指定した時のキーボードは0から9までの数字を入力するものです。負号キーを表示するかどうかは端末によります。
※inputmode="decimal"でもできます。

inputmode属性の値はnumericの他にもnone,decimal,text,tel,search,email,urlがあります。

基本はtype属性で指定すべきなので使うとすればnoneかnumeric,decimalくらいでしょう。

使用感はこんな感じ

HTML5.2で一瞬廃止になりましたが割と便利なので復活したようです。

ログインするとコメントできます