Chrome 66 が inputmode 属性に対応

公開日:

Chrome 66 が inputmode 属性に対応しました。

inputmode 属性とは次のように定義されています。

The inputmode content attribute is an enumerated attribute that specifies what kind of input mechanism would be most helpful for users entering content.

inputmodeコンテンツ属性は、ユーザーがコンテンツを入力する際に最も参考になる入力メカニズムの種類を指定する列挙属性である。

以前はW3C版 HTML5 仕様にも存在しており、WHATWG版とは異なった値が定義されていた(www.w3.org)のですが、HTML 5.2 で削除(www.w3.org)されています。

以下、Windows版とAndroid版について挙動を調べた結果を記しておきます。

Windows 10 (1803) + Chrome 66

「名前」と「Eメール」の2つの入力欄があるフォームを想定し、3パターンのマークアップで挙動を調査してみました。

HTML4 時代のマークアップ
<label>名前 <input name="name"></label>
<label>Eメール <input name="email"></label>

デフォルトのtype属性の場合(type属性を記述しない or type="text" を記述)「名前」を全角モードで入力した後、Tabキーで「Eメール」入力欄にフォーカスを移しても全角モードのままです。

「Eメール」入力欄に type="email" を指定
<label>名前 <input name="name"></label>
<label>Eメール <input type="email" name="email"></label>

type="email" を指定した場合に同じ操作を行うと、フォーカスを移した時に自動で半角モードに変化します。この挙動は Chrome 65 以前もそうでした。

「Eメール」入力欄に inputmode="email" を指定
<label>名前 <input name="name"></label>
<label>Eメール <input name="email" inputmode="email"></label>

inputmode="email" を指定した場合、同様に自動で半角モードに変化します。この挙動は Chrome 66 からのものです。

ATOK の場合

入力システムによっては挙動が異なるようです。試しに ATOK 2017 をインストールした環境で試してみると……。

「Eメール」入力欄に type="email" を指定
<label>名前 <input name="name"></label>
<label>Eメール <input type="email" name="email"></label>

type="email" を指定した場合は半角モードに変化しません

「Eメール」入力欄に inputmode="email" を指定
<label>名前 <input name="name"></label>
<label>Eメール <input name="email" inputmode="email"></label>

inputmode="email" を指定した場合は Microsoft IME と同様、自動で半角モードに変化します。

このように、自動で全角/半角モードが変化する挙動、これはあの忌まわしきime-mode: inactive(developer.mozilla.org)を思い起こさせます。

IE や Firefox ユーザーは昔から「全角モードの状態でTabキーでEメール入力欄に移動、『半角/全角キー』を押して半角モードにしたつもりが、(ime-mode が指定されていたため全角モードに戻り)全角で入力されてしまい、怒りでモニターをパンチ」「メールアドレスを辞書登録しており、全角で『しごとめーる』と打ちたかったのに、『shigotom...』くらいまで打ってから勝手に半角モードになっていることに気付き絶望」といった経験がある方も多いのではないでしょうか。まあ ime-mode プロパティは一言で言えば余計なお世話なわけですね。

私自身は ATOK 使いですから、これまでは type="email" や type="url" 等が指定してあっても困りませんでしたが、今後 inputmode 属性を指定したフォームが増えてくると、 ime-mode プロパティと同じ苦しみを味わうことになりそうです。

これは個人的な感覚ですが、 type="date" や type="number" は入力欄の見た目も変わりますから、これらが半角モードに自動変化しても特に問題はないのですが、見た目が type="text" と同じ "tel", "email", "url" に inputmode 属性を設定する際は、Webページ制作者が見た目的にも何らかの区別ができるように調整して欲しいなあと思います(入力モードが切り替わることが分かるアイコンを横に付けるとか)。

Android Chrome 66

ソフトウェアキーボードが自動で切り替わります。

Android Chrome 66 でinputmode のデモフォーム(output.jsbin.com)にアクセスした様子を以下に示します。

図拡大
図1:inputmode="none" (ソフトウェアキーボードが出現しない)
図拡大
図2:inputmode="text" (ひらがな漢字モード)
図拡大
図3:inputmode="tel" (0~9の数字 * # など、英字モードへ切り替え不可)
図拡大
図4:inputmode="url" (半角英字モード、左上記号は /_'" )
図拡大
図5:inputmode="email" (半角英字モード、左上記号は @_'" )
図拡大
図6:inputmode="numeric" (半角数字モード、英字モードへ切り替え可)

なお、PCと同様にソフトウェアキーボードの種類によっても挙動が変わるケースがあり、Google 日本語入力(play.google.com)の場合は inputmode="email" でも(英字モードにならず)日本語モードのままになる事象を確認しています。