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

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

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

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

これを実現するためにやるべきことは、大きく分けて 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されるのか把握しづらくなりそすですね。

参考にしたサイト

コメント

コメントを投稿

このブログの人気の投稿

git-svnでFILE was not found in commit HASH

いつものようにgit-svnで更新していたところ、以下のようなエラーに遭遇した。 $ git svn fetch FILE was not found in commit HASH (REVISION) (FILE, HASH, REVISIONは伏せ字) どうも無視しているディレクトリの中身にコミットがあったらしく、変更を適用しようとしてエラーになっている。 そのファイルを仮に、 hoge/foo.c としておく。 エラーの根本原因となっていたのは .gitignoreで、もともとは hoge と書いていたのだが、 hoge/ とスラッシュまで含めて書くのが正しかったようである。 上記の修正ができない場合でも、 $ git svn fetch --ignore-path hoge のようにオプション指定すればエラーは回避できる。
続きを読む

[Java] 母音か子音か

SRM 240 Div2 easyより 変数chrがStringで、小文字一文字だけだった時に、母音(a, i, u, e, o)か子音かを判定したい時、素直に考えて chr.equals("a") || chr.equals("i") || chr.equals("u") || chr.equals("e") || chr.equals("o") と書いていたけど、 "aiueo".indexOf(chr) >= 0 のスマートさに愕然とした。
続きを読む

ECJをJenkinsに食わせてみた

EclipseのJavaコンパイラであるECJをAntで呼べるようにして、Jenkinsでビルドできるようにしたというお話。もっといい方法があるという方、是非ご一報くださいますようお願い致します。 Javaの開発環境としてEclipseを採用しているところは多いだろうけれど、Jenkinsと連携しようとすると困ることがある。Jenkinsで使うJavaコンパイラをOracleから持ってくると、途端にビルドできなくなってしまうからだ。 この原因は単純にEclipseで使っているJavaコンパイラとOracleで配布されているJavaコンパイラの挙動が異なるからである。 ならば、Eclipseのコンパイラを使うようにJenkinsを設定出来れば(ここではAntを使う)問題は解決できるはずである。 EclipseのコンパイラECJを使う話はググるとたくさんでてくるけれど、同様にbuild.xmlを記述してもうまくビルドできない。入れ子になっているjarファイルを引っこ抜いて、CLASSPATHに追加しなければAntでビルドすることはできない。逆にいうと、CLASSPATHの設定さえできれば、あとはJenkinsでもうまくビルドできるということである。 ぼちぼち編集して詳しく解説していく予定です
続きを読む