読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり、所属会社の見解ではありません。 GitHub: takahashikzn

イベントハンドラの互換性問題にハマるの巻

Javascript


僕は、キーイベントを拾って何かアクションを起こすようなJavascriptに違和感を感じてます。


ただのWebアプリケーションなのに、やりすぎというか。
リッチなクライアントを作りたければ、さっさとFlashなどを使うべきです。Javascriptで頑張るのは疲れるだけ。

それに、この手の機能はブラウザ間の互換性の問題も激しい。
だからできるだけ仕事では使いません。


でも…どうしても使わなければならないケースが出てきたのでしぶしぶ使ってみたら、案の定。
ブラウザ間の互換性の問題でハマりました。

何が問題だったかというと

こんなコードを書いたのです。入力フィールドで押したキーを拾うだけという超簡単なコード。
しかしコレ、FirefoxChromeではOKなのにIEでは動かないという。

<html>
  <body>

    <input id="txt" type="text" />

    <script type="text/javascript">
      /* IE以外はOK */
      document.getElementById("txt").onkeypress = function(event) { alert(event.keyCode); };
    </script>

  </body>
</html>


調べて見ると、IEでは関数の引数がnullのようです。

で、今度は

こうしてみました。

<html>
  <body>

    <input id="txt" type="text" />

    <script type="text/javascript">
      /* Firefox以外はOK */
      document.getElementById("txt").onkeypress = function() { alert(window.event.keyCode); };
    </script>

  </body>
</html>

すると、今度はFirefoxだけ動かないという。

最終的には

あまりスマートではないですが、こうしました。

<html>
  <body>

    <input id="txt" type="text" />

    <script type="text/javascript">
      /* どれでもOK */
      document.getElementById("txt").onkeypress = function(event) { 
        if (event == null) event = window.event;

        alert(event.keyCode);
      };
    </script>

  </body>
</html>

これはどのブラウザ(IE, Firefox, Chrome)でも動きます。

なんというか

やっぱり…キーイベントには関わりたくないですね。くわばらくわばら。