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

Chromeを使っている場合の、フォームのテキスト入力欄にフォーカスが当たったときの日本語入力(IME)のオン・オフの制御ができる方法を考えてみました。

home HOME about About this site Mail Mail

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

Last update 2017-09-11 22:30

twitter Facebook はてブ LINE pocet

 

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

Sponsored Link

 

英単語テスト用

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

Chrome

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

Chrome以外では

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

プロパティ意味
auto自動(デフォルト)
activeIME オン
inactiveIME オフ
disabledIME 完全オフ

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

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

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

ChromeでIMEを制御

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

input typeのtelを使う

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

<input type="text" name="aaa" >

この「text」の部分を

<input type="tel" name="aaa" >

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


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

TYPEごとの入力制御

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

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

text

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

email

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

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

emailに全角日本語を入力日本語もちゃんと入力できました。

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

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

number

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

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

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

color

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

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

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

自動でIMEがオンに

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

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

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

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

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

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

iPhoneでの動作の仕方

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

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

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

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

まとめ

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

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

関連ページ

最終更新日 2017-09-11 22:30

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

投稿日:2017-09-07 | このページのトップへ | コメントを書く | 管理

カテゴリー

同じカテゴリーの記事