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で一瞬廃止になりましたが割と便利なので復活したようです。