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

Ответ 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 docs:

Как и в других селекторах псевдокласса (те, которые начинаются с символа ":" ), рекомендуется предшествовать: фокус с именем тега или другим селектором; в противном случае подразумевается универсальный селектор ( "*" ). Другими словами, голый $(':focus') эквивалентен $('*:focus'). Если вы ищете текущий сфокусированный элемент, $(document.activeElement) будет извлекать его без поиска всего дерева DOM.

Ответ:

document.activeElement

И если вы хотите, чтобы объект jQuery обертывал элемент:

$(document.activeElement)

Ответ 2

$( document.activeElement )

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

Ответ 3

Попробуйте следующее:

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

Ответ 4

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

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

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

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

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

(2). $(':focus') возвращает input: text: имя как ожидается в 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>

Ответ 5

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

document.activeElement.id

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

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

Ответ 6

$(':focus')[0] даст вам фактический элемент.

$(':focus') даст вам массив элементов, обычно за один раз фокусируется только один элемент, так что это будет лучше, если вы как-то сфокусировали несколько элементов.

Ответ 7

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

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