Как получить сфокусированный элемент с помощью jQuery?
используя jQuery, как я могу получить элемент ввода, который имеет фокус каретки (курсора)?
или другими словами, Как определить, имеет ли вход фокус каретки?
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 ) будет извлекать его без необходимости поиска все дерево дома.
ответ:
document.activeElement
и если вы хотите объект jQuery, обертывающий элемент:
$(document.activeElement)
$( document.activeElement )
будет извлекать его без необходимости поиска всего дерева DOM, как рекомендуется на документация jQuery
я протестировал два способа в Firefox, Chrome, IE9 и Safari.
(1). $(document.activeElement)
работает, как ожидалось в Firefox, Chrome и Safari.
(2). $(':focus')
работает, как ожидалось в Firefox и Safari.
я переместился в мышь, чтобы ввести " имя " и нажал Enter на клавиатуре, затем я попытался получить сфокусированный элемент.
(1). $(document.activeElement)
возвращает input:text:name как и ожидалось в Firefox, Chrome и Safari, но он возвращает input:submit:addPassword в ИЕ9
(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>
Как это никто не упомянул..
document.activeElement.id
Я использую IE8 и не тестировал его ни в одном другом браузере. В моем случае я использую его, чтобы убедиться, что поле минимум 4 символа и сосредоточено перед действием. Как только вы вводите 4-й номер, он срабатывает. Поле имеет идентификатор "год". Я употребляю..
if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
// action here
}
$(':focus')[0]
даст вам фактический элемент.
$(':focus')
даст вам массив элементов, обычно только один элемент фокусируется за раз, поэтому это только лучше, если у вас как-то есть несколько элементов.