QA@IT

jQueryのkeydownイベントはdivタグにも適用できるのか?

8197 PV

環境はCrome,Rails3.2です。

現在、キーボードが押されたらalertを出す処理を実装しようとしています。
そこでjsにこのように書きました。

$("div").keydown(function(e){
  alert("ようこそ!");
  return false;
});

そして、適当な場所(divタグで全体は覆われています)をクリックしてアクティブにしてから、適当なキーを押しても反応してくれません。

しかし"div"の部分をwindowに変更すると、正常に動作することからjs自体は読み込まれているようです。
このようにdiv上でのkeydownを取る方法はあるのでしょうか?そもそもそれは可能なのでしょうか?

  • 余談

余談ですが、そもそもなぜwindowを使うのではなく、divを使っているかというと、Railsはjsファイルを一括読み込みするからです。
個別に読み込ませる事も可能ですが、turbolinksが将来的に適用される可能性がある事を考えると、やめておいた方がいいのではないかと考えました。
そこで全体を適当なdivで囲って、ページ毎のユニークな値をidをふって、それを指定することで擬似的にwindowと同じ動作を実現したいと考えています。

  • focus css擬似クラスについて追記しました。 -

回答

http://jsfiddle.net/AQvKx/

input にフォーカスを当てれば event が反応します。 div 内をクリックしてフォーカスをはずすと反応しません。
keyevent は input など、キー入力が意味をなす対象にしか発生しないが、発生した場合はバブリングで親要素につたわるからです。

「div をクリックすることでアクティブにする」といった概念は、そもそもないのではないかと思います。

編集 履歴 (0)
  • 丁寧にありがとうございます。
    おとなしくerbにwindowを書いて、jsファイルを呼び出す様にしようとおもいます。
    -

divにはフォーカスが当たらないのが原因ですが、tabindexを設定すると、elementがフォーカス可能になりキーイベントが拾える。
という小技めいたものならあります。

すべてのブラウザで有効なのかどうかはわかりませんが、ChromeとIE10では可能です。

編集 履歴 (0)
  • このような方法があったのですね。
    しかしCromeではdivタグが青枠に囲まれて、UI的に難しかったのでこの方法は見送りました。
    お返事ありがとうございます。
    -
  • たぶんそれは div:focus{ outline:none; } と、focus擬似クラスで枠線を消してあげればよいかと思います。accept済みですが一応補足しておきます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。