ブラウザのキーボードを制御する inputmode

By Tomoyuki Kashiro

input[type]によるキーボードの表示制御

Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。

例えば、type="email"を指定すると、

<input type="email">

emailが入力しやすいキーボードが表示されます。

しかし、この指定方法には副作用もありました。
例えば、type="number" を指定した場合、

<input type="number">

このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。

前者はCSSで後者はJavaScriptで無効化することは可能ですが、気軽に使うことができませんでした。

inputmodeとは

開発者向けのウェブ技術 > HTML: HyperText Markup Language > グローバル属性 > inputmode

inputmode はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントを提供する列挙型属性です。下記の値が存在します。

type属性を利用せず、キーボードだけを制御する属性です。
指定内容は、 none, text, decimal, numeric, tel, search, email, url でそれぞれブラウザ別にどのようにキーボードが表示するかみてみましょう。確認したブラウザは、以下です。

  • Safari - iOS 13 iPhone 8 (simulator)
  • Chrome - Android 10 Pixel 3a
  • Chrome - windows 10 Surface Go (タブレット)

また、下記でも確認しましたが、まだinputmode非対応だったためキーボードは制御できませんでした。

  • Edge - windows 10 Surface Go (タブレット)

inputmode=none

<input type="text" inputmode="none">

アプリケーション固有の入力インターフェイスを用意しているときに、システムのキーボードを表示させない指定ですが、

  • Safari - iOS 13 iPhone 8 (simulator)
  • Edge - windows 10 Surface Go (タブレット)
  • Chrome - windows 10 Surface Go (タブレット)

これらブラウザではキーボードが表示してました。

inputmode=text

<input type="text" inputmode="text">


inputmode=decimal

<input type="text" inputmode="decimal">

inputmode=text とは異なり数値が入力しやすいキーボードになっています。
また、小数点を入力できるように、 . も表示しています。


inputmode=numeric

<input type="text" inputmode="numeric">

Androidは inputmode=decimal と同様ですが、iOSは、. が表示してなくより numeric(整数) 入力に最適されているのがわかります。


inputmode=tel

<input type="text" inputmode="tel">

電話番号を入力しやすいように、inputmode=muneric と違い +*# が表示しています。


inputmode=search

<input type="text" inputmode="search">

見た感じ、inputmode=text と同じでした。
Androidはエンターキーの見た目だけちょっと違うみたいです。


inputmode=email

<input type="text" inputmode="email">

Emailが入力しやすいように アルファベットと@ が表示しています。


inputmode=url

<input type="text" inputmode="url">

URLが入力しやすいように /.com が表示されています。


注意点

キーボード表示を制御できますが、入力値そのものを制御できるわけではありません。
例えば inputmode=email でemailが入力しやすいキーボードにはなりますが、emailとしてinvalidな文字の入力を禁止することはできませんので、今まで通りバリデーションはアプリケーション側で行いましょう。

ブラウザサポート

https://caniuse.com/#feat=input-inputmode

デモ

https://codepen.io/Tkashiro/full/dyyROPJ