586

私が構築しているサイトのフロント ページで、いくつか<div>の が CSS:hover疑似クラスを使用して、マウスがその上にあるときに境界線を追加します。の 1 つには、jQuery を使用して、その中の入力にフォーカスがある場合に境界線を保持する が<div>含まれています。これは、IE6 が s以外の要素を<form>サポートしていないことを除けば、完全に機能します。そのため、このブラウザでは、メソッドを使用してCSS を模倣するために jQuery を使用しています。唯一の問題は、jQuery がフォームとフォームの両方を処理するようになったため、入力にフォーカスがあるときにユーザーがマウスを出し入れすると、境界線が消えてしまうことです。:hover<a>:hover$(#element).hover()focus() hover()

私は、何らかの条件を使用してこの動作を停止できると考えていました。たとえば、入力のいずれかにフォーカスがあるかどうかをマウスアウトでテストした場合、境界線が消えるのを止めることができます。私の知る限り、:focusjQueryにはセレクターがないため、これを実現する方法がわかりません。何か案は？

4

15 に答える 15

974

jQuery 1.6+

jQuery は:focusセレクターを追加したので、自分で追加する必要はなくなりました。使うだけ$("..").is(":focus")

jQuery 1.5 以下

編集:時代が変わるにつれて、フォーカスをテストするためのより良い方法が見つかります。新しいお気に入りは、Ben Alman からのこの要旨です:

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 以下になるかどうかわからない場合は、:focus欠落しているセレクターを追加できます。

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );
于 2010-04-21T16:04:18.013 に答える
22

現在受け入れられているものよりも堅牢な答えを次に示します。

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

(elem.type || elem.href)のような誤検知を除外するためにテストが追加されたことに注意してくださいbody。このようにして、フォーム コントロールとハイパーリンクを除くすべての要素を確実に除外します。

( Ben Almanによるこの要点から引用。)

于 2011-03-22T12:58:29.440 に答える
2

あなたが何を求めているのか完全にはわかりませんが、これは入力要素（またはdiv？）の状態を変数として保存することで実現できるようです：

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});
于 2009-06-08T21:37:31.763 に答える
1

誰かが気になるなら、今すぐ集中力を高めるもっと良い方法があります。$(foo).focus(...)

http://api.jquery.com/focus/

于 2014-10-30T03:51:46.553 に答える
1

クラスを使用して要素の状態をマークする代わりに、内部データ ストア機能があります。

PS: 関数を使用して、ブール値と必要なものを格納できdata()ます。それは文字列だけではありません:)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

あとは、要素の状態にアクセスするだけです。

于 2009-06-09T11:30:07.507 に答える
0

両方の状態 (ホバー、フォーカス) を true/false フラグとして追跡し、いずれかが変更されるたびに、両方が false の場合は境界線を削除し、そうでない場合は境界線を表示する関数を実行します。

つまり、onfocus は focused = true を設定し、onblur は focused = false を設定します。onmouseover は hovered = true を設定し、onmouseout は hovered = false を設定します。これらの各イベントの後、境界線を追加/削除する関数を実行します。

于 2009-06-08T21:35:40.020 に答える
0

私の知る限り、画面上の入力にフォーカスがあるかどうかをブラウザーに尋ねることはできません。何らかのフォーカス追跡を設定する必要があります。

私は通常、「noFocus」という変数を持っていて、それを true に設定します。次に、noFocus を false にするフォーカス イベントをすべての入力に追加します。次に、noFocus を true に戻すブラー イベントをすべての入力に追加します。

これを非常に簡単に処理する MooTools クラスがあります。jquery プラグインを作成して同じことを行うことができると確信しています。

それが作成されたら、境界線の交換を行う前に noFocus をチェックできます。

于 2009-06-08T21:36:40.283 に答える
0

:focus はありませんが、:selected はあり ます http://docs.jquery.com/Selectors/selected

しかし、選択内容に基づいて物事の外観を変更したい場合は、おそらくぼかしイベントを操作する必要があります。

http://docs.jquery.com/Events/blur

于 2009-06-08T21:38:14.243 に答える
0

ユーザーが新しい値を入力する前にテキスト入力の内容を選択する必要がないように、.live("focus") イベントを select() (強調表示) に設定しました。

$(formObj).select();

異なるブラウザ間の癖のため、選択はそれを引き起こしたクリックに取って代わられることがあり、テキストフィールド内にカーソルを配置することを優先して、コンテンツの選択をすぐに解除します (FF ではほとんど問題なく動作しましたが、IE では失敗しました)。

選択を少し遅らせることでこれを解決できると思いました...

setTimeout(function(){$(formObj).select();},200);

これは問題なく機能し、選択は持続しますが、面白い問題が発生しました。あるフィールドから次のフィールドにタブで移動すると、選択が行われる前にフォーカスが次のフィールドに切り替わります。select はフォーカスを盗むため、フォーカスは戻って新しい「フォーカス」イベントをトリガーします。これにより、入力選択のカスケードが画面全体で踊ることになりました。

実行可能な解決策は、select() を実行する前にフィールドにまだフォーカスがあることを確認することですが、前述のように、確認する簡単な方法はありません...本来あるべきものを回すのではなく、自動ハイライト全体を省略してしまいましたサブルーチンを積んだ巨大な関数への単一の jQuery select() 呼び出し...

于 2011-09-08T19:56:19.683 に答える
0

要素がフォーカスされているかどうかを確認するプラグインがあります: http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})
于 2009-11-12T09:05:16.220 に答える
-2

単純

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>
于 2012-03-16T07:28:22.680 に答える