javascript - jQueryでフォーカスされた要素を取得するには?

Question

jQueryを使用して、キャレット(カーソル)のフォーカスを持つ入力要素を取得するにはどうすればよいですか?

言い換えれば、入力にキャレットのフォーカスがあるかどうかを判断する方法は?

Answer 1

// 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 の前にタグ名またはその他のセレクターを付けることが推奨されます。それ以外の場合は、ユニバーサル セレクター ("*") が暗示されます。つまり、bare$(':focus')は と同等$('*:focus')です。現在フォーカスされている要素を探している場合、$( document.activeElement ) は DOM ツリー全体を検索することなくそれを取得します。

答えは次のとおりです。

document.activeElement

また、要素をラップする jQuery オブジェクトが必要な場合は、次のようにします。

$(document.activeElement)

Answer 2

$( document.activeElement )

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

Answer 3

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>

Answer 4

これを試して：

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