Chromeの入力欄でIMEのオン・オフを制御するには

Last update 2017-09-11 22:30

メールアドレス入力欄では自動でIMEをオフにしたり、氏名を入力する欄では日本語をオンにしたり・・・と、使い勝手を良くしたホームページを作りたいと思っても、Chromeの場合なかなかうまくいきません。
Chromeで、フォームページのテキスト入力欄にフォーカスが当たると日本語入力(IME)をオンにしたり、逆にオフにしたり出来ないか実験してみたのですが、すごく簡単にIMEを制御できる方法が見つかったので紹介したいと思います。

英単語テスト用

何を血迷ったか最近、英語の勉強を始めてしまいました。特に目的はなかったのですが、友だちが仕事で英語を使うかもしれないと言うので、英語の勉強をし始めたらしいのですが、色々話を聞いているうちに私も英語の勉強にハマってしまいました。
と言っても初歩の初歩の段階なので、まずは英単語を覚える勉強から。

Chrome

で、Web上で単語のテストが出来るページを作成したのですが、このときに問題によっていちいち日本語をオンにしたりオフにしたりするのがすごく面倒。
そこで自動的にIMEを制御できるJavascriptやCSSがないのかなぁ。と思ったのですが、どうもChromeでは対応していないっぽい。
そこですごくスマートにChromeでIMEを制御する方法を紹介します。

Chrome以外では

Internet ExplorerやEdge、FirefoxのようなChrome以外のブラウザでは、スタイルシート(CSS)の「ime-mode」を使うとIMEの制御が出来ます。
プロパティと動作は以下。

プロパティ	意味
auto	自動(デフォルト)
active	IME オン
inactive	IME オフ
disabled	IME 完全オフ

input {
/* 日本語をオン */
ime-mode:active;
}

「active」の場合は、日本語入力が自動でオン(つまりIMEをオン)になります。逆に「inactive」は、日本語入力がオフになります。
ただしこの2つは、テキスト入力欄にフォーカスが当たったときにオン・オフになるだけなので、手動でIMEをオン・オフできます。

「disabled」の場合は、タスクバー上のIMEのアイコンが「あ」となっていても、日本語が入力できません。例えば「あ」と入力しようとしても、強制的に「a」が入力されます。

ChromeでIMEを制御

さて、以下では「ime-mode」の「active」や「inactive」のような動作ができるようになります。

input typeのtelを使う

単行のテキスト入力欄を作成する場合は、たいてい以下のようなタグになると思います。

この「text」の部分を

に変更します。
これだけでフォーカスが当たると、IMEをオフにしてくれます。
実際に以下のテキスト入力欄で試してみてください。上の入力欄にフォーカスが上がっているときにIMEをオンにして、2番めの入力欄へ移動してみてください。

さて、「 type="tel" 」は電話番号用の入力欄専用のプロパティなので、数字しか入力できないんじゃないの?と思うかもしれませんが、実際には英字や日本語も入力できます。

TYPEごとの入力制御

INPUTには「 tel 」以外にも「 number 」や「 email 」、「 color 」などを指定することが出来ます。
そこで今度はそれぞれのプロパティを指定した場合、どのような入力制限を受けるのか調べてみました。

このようなテキスト入力欄をつくってみました。

text

一番上はノーマルな「 type="text" 」の場合。この入力欄で日本語入力(IME)をオンにしてみます。

email

「Tabキー」でその下の「 type="email" 」にフォーカスが当たると、IMEは「A」。つまりオフになりました。

ただし、フォーカスが当たったときに一度だけIMEをオフするだけで、手動でIMEをオンにすることも出来ます。

日本語もちゃんと入力できました。

ただし、送信ボタンを押すとこのようにメールアドレスにふさわしくない文字が使用されていると警告されて送信できません。

「@」がない値を送信しようとするとやはりこのような警告が表示されて送ることが出来ませんでした。

number

再び「Tabキー」を押すと下の「 type="number" 」にフォーカスがあたりました。
が、この場合、日本語も英字も入力できなくなりました。入力できるのは数字だけです。
また、入力欄の右に小さな三角の矢印ボタンが表示されました。

ボタンをクリックするとキーボードを使わずに数字を入力できました。
ちなみに▼のボタンを押して0以下になると、マイナスの数字が入力されていきます。

で、「 type="tel" 」にフォーカスが移動すると、IMEはオフのまま。
このように英字だけでなくスペースも入力できました。

color

最後に「 type="color" 」も紹介しておきます。
このプロパティだけこのような特殊な表示方法になっています。
この部分をクリックすると・・・

このような「色の設定」が表示されました。好きな色をクリックすることが出来ます。

このように色が変わりました。

自動でIMEがオンに

さて、自動でIMEがオフになったあと、「 type="text" 」に戻った時にIMEがオンに戻るのでしょうか。
実際に試してみるとこのように自動でIMEがオンになりました。

実際にどのような値を送信できるのか？

というわけで様々な入力欄が独特の動作をすることがわかり、その中でも「 type="tel" 」は、「電話番号」だけでなく半角英数字を入力させたい場合などにも使えそうです。

では最後に、それぞれの入力欄に値を入れてきちんと送信できるのか試してみました。

「 type="tel" 」の入力欄に数字以外の値を入力してもちゃんと送信できることがわかりました。

手動でIMEをオンにした場合はこのように日本語も送信できます。

iPhoneでの動作の仕方

では、iPhoneのSafariではどのような動作になるのでしょうか？
試してみると「 type="number" 」は、ディスプレイキーボードが数字入力モードになりました。
が、英字や日本語も手動で変更可能です。

ただし、emailもnumberも適切でない値が入力されていると、送信するときにこのような警告が表示されて送信できなくなりました。

「 type="tel" 」の場合は数字しか入力できなくなりました。

「 type="color" 」の場合はカラーピッカーのような物が出ません。
自分で入力する必要があるようです。

まとめ

日本語を入力したいのにIMEがオフだった。逆に英字を入力したいのに、IMEがオンだった・・・。なんて経験は誰にでもあると思います。
本来であればIMEがオンであれば入力欄の背景か枠の色が変わる、的な機能があればいいのですが、残念ながらそういった機能はChromeには搭載されていないので、いろいろな人がたくさんのアイデアを出しているようです。

私の場合は単に、英単語の試験ページをストレスなく入力できるようにしたかっただけだったので、今回の機能でバッチリ問題を解決できました。

Chromeの入力欄でIMEのオン・オフを制御するには