Chrome 66 が `inputmode` 属性に対応

投稿: 2018年5月23日

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

inputmode - Chrome Platform Status(www.chromestatus.com)

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

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

6.6.7 Input modalities: the inputmode attribute

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

6.6.7 入力モダリティ：inputmode属性(momdo.github.io)

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

以下、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ページ制作者が見た目的にも何らかの区別ができるように調整して欲しいなあと思います（入力モードが切り替わることが分かるアイコンを横に付けるとか）。