入力フィールドのIMEモード(日本語入力機能)を自動で切り替える方法

フォーム画面では、入力してほしい文字の種類が決まっている場合があります。

例えば「すぐ使えるCMS」の管理画面なら、日付は半角の数字ですがその次の「タイトル」欄は日本語です。また「すぐ使えるメールフォーム」であれば、郵便番号は半角で入力してもらっても、その次の住所情報は日本語での入力が必要になります。

このような場合に、それぞれの入力欄に移動したときに自動でIME入力モードの日本語変換 ON/OFF を切り替える方法をご紹介します。

制限事項

製品のバージョンとブラウザ、OSの組み合わせによってはこの機能が働かない場合があります。Windows の Internet Explorer と Firefox では機能しますが、Chrome、Safari、Opera では機能しない事が分かっています。

また、この仕組みは CSS の「ime-mode」プロパティを利用していますが、このプロパティは CSS3 では非推奨となりました。

設定方法

編集対象ファイル

入力フォーム用のテンプレートを編集します。編集対象ファイルは以下の通りです。

「すぐ使えるCMS」の管理画面

templates/admin/2.html

「すぐ使えるメールフォーム」の入力画面

templates/input.html

CSSの追加:Ver. 4.0 以下の「すぐ使えるCMS」製品の場合のみ

Ver. 4.0 以下の「すぐ使えるCMS」(旧「すぐ使えるCGI」)製品の場合は、まず以下のコードを <head> と </head> の間に追加して下さい。

コピー
<style type="text/css">
.noime{
    ime-mode: disabled; /* 半角英数固定 */
}
.imeoff{
    ime-mode: inactive; /* 移動してきた時に半角英数になる */
}
.imeon{
    ime-mode: active; /* 日本語入力モードに切り替え */
}
.imeauto {
    ime-mode: auto; /* 何も変更しない */
}
</style>

項目の設定(全ての製品・バージョン)

入力モードの切り替えを行いたい項目に、下記例を参考に希望のモードに応じた CSSクラスを追加して下さい。既に入力欄に class属性が付いている場合は、スペースに続けて青字のクラスだけを追加して下さい。class属性が付いていない場合は、「class="..."」全体を追加して下さい。

同時に、Ver. 4.0 以下の「すぐ使えるCMS」(旧「すぐ使えるCGI」)製品をお使いの場合で項目に「onFocus="set_imemode(...)"」が設定されていたら、これを削除して下さい。

※周辺のコードは異なる場合があります。class属性と onFocus属性だけが編集のポイントです。

日本語入力モードに切り替える場合

日本語入力モードに切り替える場合は class属性に「imeon」を指定して下さい。

コピー
<input class="imeon" name="subject" id="subject" type="text" value="%_subject_%">

半角英数字のみを入力する場合

絶対に半角しか許可しない入力欄は、class属性に「noime」を指定して下さい。このように設定したフィールドではIME入力モードを日本語入力に変更できません。

コピー
<input class="noime" name="subject" id="subject" type="text" value="%_subject_%">

半角英数字に自動切替されるようにする場合

入力欄に移動した時に半角英数字モードに自動切替されるようにするには、class属性に「imeoff」を指定して下さい。この設定の場合、入力欄に移動した時には一旦日本語入力モードがOFFになりますが、必要ならユーザの操作で日本語入力モードをONにできます。

コピー
<input class="imeoff" name="subject" id="subject" type="text" value="%_subject_%">

それまでの入力モードを変更しない場合

入力欄に移動する前の入力モードを変更しない場合は、class属性に「imeauto」を指定して下さい。

コピー
<input class="imeauto" name="subject" id="subject" type="text" value="%_subject_%">

アップロード

変更したテンプレートをサーバの同じ位置に上書きアップロードして下さい。

確認

フォーム画面にアクセスして動作を確認して下さい。

入力モードの自動切替に関する注意点

  • パソコンの操作に慣れた方が管理画面を使う場合は、「勝手に入力モードが変わってしまう」事が却って操作しにくい場合がありますので、実際に使用感を試しながら設定を行って下さい。
  • 入力内容は半角でも、頻繁に入力する情報(例:自分のメールアドレスや電話番号)は日本語変換辞書に登録している場合もあります。このような場合に強制的に日本語入力OFF(noime)にしてしまうと、却って入力がしにくくなるので注意して下さい。「imeoff」の方がお勧めです。
  • この機能はブラウザに依存するため、確実に入力の文字種類を制限するものではありません。