Как получить сфокусированный элемент с помощью jQuery?

// 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)

$( document.activeElement )

Извлечет его без поиска всего дерева DOM, как это рекомендовано в документации jQuery

Попробуй это:

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

Я тестировал два способа в Firefox, Chrome, IE9 и Safari.

(1). $(document.activeElement)работает как ожидается в Firefox, Chrome и Safari.

(2). $(':focus')работает как в Firefox, так и в Safari.

Я переместился в мышь, чтобы ввести «имя» и нажал «Ввод» на клавиатуре, а затем попытался получить сфокусированный элемент.

(1). $(document.activeElement)возвращает вход: текст: имя, как ожидается, в Firefox, Chrome и Safari, но оно возвращает вход: submit: addPassword в IE9

(2). $(':focus')возвращает ввод: текст: имя как ожидается в Firefox и Safari, но ничего в 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>

Как об этом никто не упоминал ..

document.activeElement.id

Я использую IE8 и не тестировал его ни в одном другом браузере. В моем случае я использую его, чтобы убедиться, что поле имеет минимум 4 символа и сфокусировано перед тем, как действовать. Когда вы вводите 4-й номер, он запускается. Поле имеет идентификатор «год». Я использую..

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