IMEオン時のonkeyupイベントについて

スポンサーリンク

IMEオンの状態の場合、IEとFireFoxとでイベントの発生の仕方が異なるのでメモ。

IEだとIMEで入力中もイベントを拾ってくれるが、FireFoxだと拾ってくれません。
確認に使用したHTMLは下記となります。

<html>
  <head>
    <script type="text/javascript" language="javascript">
    <!--
    function dispEvent(event) {
      var disp = document.getElementById('disp_event');
      var elm = document.createElement('div');
      elm.innerHTML = "keyCode:" + event.keyCode + " value:"
                        + (event.target || event.srcElement).value;
      disp.appendChild(elm);
    }
    //-->
    </script>
  </head>
  <body>
    <form onsubmit="return false;">
      <input type="text" name="keyup"
               onkeyup="dispEvent(event || window.event);" />
    </form>
    <div id="disp_event" />
  </body>
</html>

例えば、IMEオンの状態で「テスト」と入力し、そのままIMEで変換を確定した場合、下記のようなイベント発生順序になります。

IEの場合

keyCode:25 value:
keyCode:18 value:
keyCode:84 value:t
keyCode:69 value:て
keyCode:83 value:てs
keyCode:85 value:てす
keyCode:84 value:てすt
keyCode:79 value:てすと
keyCode:32 value:テスト
keyCode:13 value:テスト

FireFoxの場合

keyCode:25 value:
keyCode:18 value:
keyCode:13 value:テスト

見ての通り、IEでは、押下した全てのkeyに対してイベントが発生しますが、FireFoxではIMEオン時の入力操作に対してイベントが発生しません。
FireFoxだとIMEにて候補を確定する時のリターンキーまで、イベントが発生しない事になります。

Google Suggestみたいに、入力欄の変化にあわせて何か処理を行いたいならば、onkeyupなどのキーイベントで処理を行うのではなく、setTimeoutを使って定期的に入力内容を監視し、前回との差分があった場合に何か処理を行うと言った手を使うのがベストですかね。