[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する

質問

私が構築しているサイトのトップページに、いくつかの <div> は、CSS :hover 擬似クラスを使って、マウスを乗せたときにボーダーを追加することができます。擬似クラスの1つである <div> には <form> これは、jQueryを使用して、その中の入力にフォーカスがある場合に境界線を維持します。これは、IE6 が :hover 以外の要素で <a> s. そこで、このブラウザに限っては、jQueryを使ってCSSを模倣しています。 :hover を使用しています。 $(#element).hover() メソッドを使用します。唯一の問題は、jQueryがフォームの focus() と hover() 入力にフォーカスがあり、ユーザーがマウスを出し入れすると、境界線が消えます。

私は、何らかの条件を使ってこの動作を止めることができないかと考えていました。例えば、マウスアウト時に、いずれかの入力にフォーカスがあるかどうかをテストすれば、ボーダーが消えるのを止めることができます。AFAIKでは :focus のセレクタを使用しているため、これを実現する方法がわかりません。何かアイデアはありますか？

解決方法は？

jQuery 1.6+

jQueryに :focus セレクタを追加する必要はありません。単に $("..").is(":focus")

jQuery 1.5以下

編集する 時代の変化とともに、フォーカスをテストするためのより良い方法が見つかり、新しいお気に入りは Ben Alman氏によるこのgist :

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Mathias Bynensより引用 こちら :

なお (elem.type || elem.href) テストは、body のような誤検出を除外するために追加されました。この方法で、フォームコントロールとハイパーリンク以外のすべての要素をフィルタリングするようにします。

新しいセレクタを定義しているのですね。参照 プラグイン/オーサリング . すると、できるようになります。

if ($("...").is(":focus")) {
  ...
}

または

$("input:focus").doStuff();

任意のjQuery

どの要素にフォーカスが当たっているかを把握したいだけなら

$(document.activeElement)

バージョンが1.6以下になるかどうかがわからない場合は、1.6以下の場合は :focus セレクタがない場合は

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );