JavaScript : 日本語入力時のキーイベント。

さてさて、JavaScriptで「日本語入力がON & 変換確定時に何か処理をしたい」と考えました。「日本語の変換が確定した」という情報を得なくてはなりません。キーイベントを受け取ることで、日本語入力中 / 変換確定 の区別は可能なんだろうか。

手元にある、いくつかのブラウザで挙動を調べてみた。

Firefox 3.6.x (Gecko 1.9.2) : Mac OS X , Windows , Linux(Xubuntu)

日本語変換中は、全てのキーで keydown,keypress,keyup,全てのイベントを受け取らない。
確定のエンターキーを押したときのキーアップイベントから復活。

Internet Explorer 8

日本語入力中、keydownにはキーコード"229"が、keyupには押したキーのキーコードが返ってくる。キープレスイベントは発生しない。
日本語変換中の

• 複数変換候補からの選択時に押すスペースキー / 矢印キー
• 文節切り直し時の矢印キー
• 文節移動時の矢印キー
• 部分確定時のエンターキー
• 全確定時のエンターキー

の全てで同様(keydown=229, keyup=押したキーのキーコード)の情報が返ってくる。

Safari 4.x, 5.x (AppleWebKit/533.18.1) : Mac OS X , Windows

IE8と同様。

Google Chrome 7 (AppleWebKit/534.7) : Mac OS X , Windows

IE8と同様。
ただし、多分バグだと思うのですが、日本語変換を確定するときに叩くEnterキーにkeyUpイベントが発生しません。

Google Chrome 7 : Linux(Xubuntu)IMEはAnthyを使用

Firefoxと同様。日本語変換中は何も喋らない。

Opera 10.6 : Mac OS X

keydown, keyupには、押したキーのキーコードが返る。keypressは発生しない。
変換候補からの選択時に押すスペースキー、部分確定時のエンターキーでkeydown,keyupが発生する。

…ということで結論は、

• Firefoxであれば、keyupイベントでenterキーのキーコード(13)を監視していれば、日本語の変換が確定したかどうかを判別できる。
• IE8、Safari、Chromeでは、「keydownイベントで返ってくるキーコードが229かどうか」を監視することで、日本語入力モードがONであるかどうかを判別することはできるが、入力中か全確定したか部分確定中かの判別は不可能。
• Operaは、なんだか中途半端。

となりますな。

冒頭に書いた「日本語入力がON & 変換確定時に何か処理をしたい」という目的からすれば、Firefoxの挙動が理想なのですが、「正しい動作」という点から見たら、その他のブラウザの動きのほうが良いんでしょうなぁ。

テキストエリアに何か入力したときに発生するキーイベントをキャプチャするスクリプトを書いてみたので、ブラウザの挙動を確認してみてください。
　　→ JavaScript : 日本語入力時に発生するキーイベントのテスト