マウスとキー入力のイベントを同時に判定したい

昨日つまづいたのでメモ。

特定の要素内にマウスが乗ってる時だけキー入力を受け付けたい、そんな場面に出くわしました。もっと具体的には・・・まず、ページ構成として入力エリアと選択エリアの二分されている状態を想像してください。入力エリアではフォームが幾つか配置されていて、選択エリアではアイテムがタブキーの入力で動的に変更されるように設計されていたとします。この時何の工夫もしていなければ、タブキーを押すとフォーカスがフォームを移動すると同時に選択エリアが更新されてしまう場合があります。これはユーザーが意図しない挙動で、入力エリアと選択エリアでタブキーの役割を変更するべきだと考えられます。

前置きが長くなりましたが、要は、マウスが乗ってる状態とキー入力のイベントをペアで制御したいということになります。

これを実現するためにやるべきことは、大きく分けて 2 つになります。

  1. keydownイベントで実行する関数本体を作る
  2. mouseoverイベントでkeydownイベントに1.をバインドする (mouseoutでunbind)
具体的なサンプルコードは以下のようになります。
<html>
  <head>
    <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("div").css("background-color","#C0C0C0");
        function displayKeycode(event) {
          $("div").text(event.keyCode);
        }
        $("div").mouseover(function() {
          $(document).bind("keydown",displayKeycode);
        });
        $("div").mouseout(function() {
          $(document).unbind("keydown",displayKeycode);
        });
      });
    </script>
  </head>
  <body>
    <div>
      hello
    </div>
  </body>
</html>
これをブラウザで開くと、灰色の枠内に「hello」とだけ表示されます。マウスカーソルが枠内にある場合は、キー入力に応じてkeycodeを表示します。反対に、マウスカーソルが枠外にある場合は文字は反応しません(helloに戻すなどの処理は行なっていないため、直前の表示のままとなります)。

bind/unbindを使用すればより細かく状況を判定してイベントハンドラを発行できそうですが、気を付けないとどこで何がbind/unbindされるのか把握しづらくなりそすですね。

参考にしたサイト

コメント

このブログの人気の投稿

[Java] 母音か子音か

git-svnでFILE was not found in commit HASH

駄文