ホームページ作成／フォームの活用・装飾 (HTML,CSS,JavaScript)

CSSでIMEの状態を制御するime-modeの使い方＋代替方法(2ページ目)

ウェブ上の入力フォーム内で日本語入力機能(IME)の「ON(全角)・OFF(半角)・無効」の設定状態を変更できるCSSに、ime-modeプロパティがあります。IE・Edge・Firefoxで使用可能ですが、CSS3の仕様には「サポートすべきでない」と書かれているため対応ブラウザは増えないでしょう。本記事では、ime-modeの書き方に加えて、ime-modeを使わずに済ませる代替方法として、HTML5.1で新設のinputmode属性を使う方法など数種類をご紹介。

執筆者：西村文宏

ホームページ作成ガイド

ime-modeプロパティを使わずに済ませる代替方法

さて、ime-modeプロパティを使わずに済ませるには、以下に挙げる2種類の方法があります。

また、本稿執筆時点では対応ブラウザがChromeだけしかありませんが、望ましい文字種を指定しておける仕組みがHTML5.1の仕様には追加されています。

望ましい入力モードを指定できるinput要素のinputmode属性

上記の3点を、順にご紹介いたします。

入力内容をチェックする機能を使う

半角文字を入力して欲しいからといって日本語入力機能(IME)をOFFにしても、コピー＆ペーストなどの方法で全角文字を入力できます。そもそも「半角で入力して欲しい」という場合でも、半角文字なら何でも良いというケースは少ないでしょう。もし電話番号のための入力欄なら、半角文字で「ABCDE」などと書かれても困ります。日本語入力機能(IME)を制御するよりも、入力された内容が要求に合致しているのかどうかをチェックする機能を用意する方が役に立ちます。

■入力チェックスクリプトを使う

入力内容をチェックするスクリプト

JavaScriptで入力内容のチェックができるスクリプトは多数あります。右図のように、入力欄のすぐそばにリアルタイムで入力案内のメッセージを表示すれば、誤入力を防ぎやすいでしょう。

詳しくは記事「フォームの入力内容をリアルタイムにチェックする方法」で紹介しています。

■input要素のpattern属性で入力制限を施す

指定した規則に合致していない場合の例 (Chromeでの表示例)

スクリプトを使うまでもなく、input要素にpattern属性を加えるだけで、指定した正規表現を元に入力内容をチェックして、右図のような案内を表示させられます(案内の表示形態はブラウザによって異なります)。HTMLだけで作れるため、JavaScriptが無効な環境でもチェックできます。

詳しくは記事「JavaScriptで入力文字を制限(入力チェック)する方法」の冒頭で、「スクリプトを使わなくても入力内容をチェックできる方法」として紹介しています。

■input要素のtype属性を使う

type属性の指定でも入力チェックが機能する

そもそも自力で正規表現を記述するまでもなく、メールアドレスやURLなど一部の内容なら、input要素のtype属性を使って種類を指定しておくだけで右図のような入力チェック機能が働きます。チェック結果の表示方法はブラウザによって異なりますが、代表的なブラウザにはすべて同様のチェック機能があります。

使い方はとても簡単です。まず、汎用的なテキスト入力欄を作る場合は、input要素を下記のように記述します。

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

しかし、テキスト入力欄を作るtype属性値には、text以外にもemailやnumberなどがあります。

<input type="email" name="test1">
<input type="number" name="test2">
<input type="password" name="test3">
<input type="url" name="test4">

これらのうち、メールアドレス入力用の値「email」や、URL入力用の値「url」、数値入力用の値「number」では入力結果のチェック機能が働きます。それぞれの種類に合致しない内容が入力された場合は、バルーンなどを使ってメッセージが表示されます。また、パスワード入力用の値「password」では日本語入力機能(IME)が自動的にOFFになります。

上記のHTMLソースの表示例は以下の通りです。
これらの役割に合致するのなら、そのtype属性値を指定すると便利でしょう。なお、これらのtype属性値はスマートフォンなどのモバイル端末でソフトウェアキーボードが表示される際に特に役立ちます。詳しくは記事「スマートフォンでも使いやすいテキスト入力欄を作る」をご参照下さい。

※type属性の値には「tel」も指定可能ですが、同時にpattern属性で記述フォーマットを指定しないと入力内容のチェックはされません。しかし、pattern属性がなくても、モバイル端末などでは電話番号の入力に適したキーボードが表示される効果はあります。

自動変換する方法を使う

何らかの都合で「英数字はすべて半角文字として得たい」という場合でも、閲覧者に「半角で入力して下さい」と依頼するよりは、全角文字を半角文字に自動変換してしまう方が確実です。そうすれば何の注釈も要りませんし、ユーザに余計な気遣いを求める必要もなくなります。

なお、JavaScriptで変換する方法もありますが、その場合はJavaScriptが無効に設定されている環境では自動変換ができません。入力データをウェブサーバに送信するのであれば、ウェブサーバ側で変換処理を実行する必要があるでしょう。

Perlで問い合わせフォーム(4)入力チェック

例えばPerlを使って全角文字を半角文字に変換する方法は、All AboutのPerlガイドサイト内にある記事「Perlで問い合わせフォーム(4)入力チェック」で解説されていますのでご参照下さい。

望ましい入力モードを指定するinputmode属性が使えるようになる？

input要素やtextarea要素では、どのような入力モードが望ましいのかをブラウザに指示できるinputmode属性が使えます。ただし、HTML5.1の仕様にはあるものの、本稿執筆時点ではChrome66以降だけでしかサポートされていません。この記述方法が様々なブラウザで使えるようになるには、もう少し時間がかかるでしょう。

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

例えば上記のように値として「kana」を指定すると、漢字変換が可能な入力モードが望ましいことを示します。値に「latin」を指定すると英字の入力モードが望ましいことを示します。おそらく、モバイル端末でソフトウェアキーボードを表示する際に、デフォルトでどのようなキーを見せるべきかを判断する目的などで使われるのでしょう。もしかしたら、PC環境でもIMEの状態が切り替わるかもしれません。
※参考：HTML 5.1 日本語訳 4.10.19.7 入力モダリティ：inputmode属性