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

используя jQuery, как я могу получить элемент ввода, который имеет фокус курсора (курсора)?

или другими словами, Как определить, имеет ли вход фокус каретки?

6 298
javascript jquery element cursor caret

6 ответов:

// 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)
649
$( document.activeElement )

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

30

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

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

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

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

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

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

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

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

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

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

0