web-dev-qa-db-ja.com

どこのようにjQueryで注目の要素を手に入れるには？

JQueryを使用して、キャレット（カーソル）のフォーカスを持つinput要素を取得する方法を教えてください。

または言い換えれば、入力がキャレットの焦点を当てているかどうかを判断する方法は？

javascriptjquerycursorelementcaret
314
dave
// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

どちらを使うべきですか？ jQueryのドキュメントを引用する ：

他の疑似クラスセレクタ（ "："で始まるもの）と同様に、タグ名や他のセレクタでフォーカスすることをお勧めします。それ以外の場合は、ユニバーサルセレクタ（ "*"）が暗黙的に使用されます。言い換えれば、$(':focus')だけが$('*:focus')と同等です。現在フォーカスのある要素を探しているなら、$（document.activeElement）はDOMツリー全体を検索する必要なしにそれを検索します。

答えは：

document.activeElement

そして、あなたが要素を包むjQueryオブジェクトが欲しいならば：

$(document.activeElement)
685
gdoron
$( document.activeElement )

jQueryのドキュメントで推奨されているようにDOMツリー全体を検索しなくても検索できます

32
Grilse

これを試して：

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
6
Adil Malik

Firefox、Chrome、IE9、Safariの2つの方法でテストしました。

（1） $(document.activeElement)はFirefox、Chrome、Safariで期待通りに動作します。

（2） $(':focus')はFirefoxとSafariでは期待通りに動作します。

マウスで「名前」を入力してキーボードのEnterキーを押すと、フォーカスされた要素を取得しようとしました。

（1） $(document.activeElement)はFirefox、Chrome、Safariでは期待通りにinput：text：nameを返しますが、IE9ではinput：submit：addPasswordを返します。

（2） $(':focus')はFirefox：Safariでは期待通りinput：text：nameを返しますが、IEでは何もしません

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>
5
ucdream

それは誰が言及しているのですか..

document.activeElement.id

私はIE 8を使用しており、他のブラウザではテストしていません。私の場合、私はそれがフィールドが最低4文字であることを確認するために使用していて、演技の前に集中しています。あなたが4番目の数字を入力すると、それは誘発します。このフィールドのIDは 'year'です。使ってます..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}
1
Sparky

これを試して：：

$(document).on("click",function(){
    alert(event.target);
    });
0
Pudugurthi Ravindar

$(':focus')[0]はあなたに実際の要素を与えます。

$(':focus')はあなたに要素の配列を与えるでしょう。通常は一度に1つの要素だけがフォーカスされるので、これはあなたがどうにかして複数の要素がフォーカスされている場合にのみより良いです。

0
Travis Heeter