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

302

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

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

Теги:
element
cursor
caret

7 ответов

695
Лучший ответ
// 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
    но подождите, как я могу получить элемент, который имеет каретку?
  • 0
    @ Dave. Что вы имеете в виду "есть карета" ? внимание? мышь на это?
Показать ещё 6 комментариев
31 
$( document.activeElement )

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

Поделиться
  • 1
    Как получить элемент, который имеет каретку?
6

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

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Поделиться
  • 0
    Да, именно поэтому этот цикл будет иметь только одну итерацию. тревога просто чтобы продемонстрировать пример. Если у вас есть эта переменная, вы можете делать все, что хотите.
  • 0
    Как можно сфокусировать более одного элемента?
Показать ещё 2 комментария
5

Я тестировал два способа в 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>
Поделиться
0

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

$(document).on("click",function(){
    alert(event.target);
    });
Поделиться
0

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

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

Поделиться
0

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

document.activeElement.id

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

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню