0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

<input type="password">でテンキーを表示したいとき

Last updated at Posted at 2021-02-28
<input type="password">

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

しかし、パスワードを数字に限定したい場合には英数字キーボードは不便です。

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

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

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?