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

345

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

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

javascript jquery cursor element caret Дейв
источник

Возможный дубликат stackoverflow.com/questions/967096/…

Барт с

Возможный дубликат: stackoverflow.com/questions/516152/…

Сэм Шайлс

741

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

Гдорон поддерживает Монику
источник

2

но подождите, как я могу получить элемент, который имеет каретку?

Дэйв

@ Dave. Что вы имеете в виду "есть карета" ? внимание? мышь на это?

Гдорон поддерживает Монику

Хорошо, вот моя ситуация: когда я щелкаю по определенному элементу, я хочу поместить символ в последний выделенный текстовый элемент ввода. В основном элемент, который был в фокусе последним или правым, прежде чем щелкнуть этот конкретный элемент.

Дэйв

1

@ Dave. Это не может быть сделано. Я думаю, что только IE имеет эту функцию, но вы задаете другой вопрос, вы должны сделать это в новом вопросе.

Гдорон поддерживает Монику

3

Мне нравится, как вы использовали префикс с именем $ prefix, так $focusedкак я предполагаю, что вы делаете это для обозначения var как объекта jquery. TYVM.

Валамас

36

$( document.activeElement )

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

молодой лосось
источник

1

Как получить элемент, который имеет каретку?

Дэйв

6

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

ucdream
источник

5

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

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

Адиль Малик
источник

Да, поэтому этот цикл будет иметь только одну итерацию. тревога просто чтобы продемонстрировать пример. Если у вас есть эта переменная, вы можете делать все, что хотите.

Адиль Малик

Как можно сфокусировать более одного элемента?

Андреас Фюрстер,

@ AndreasFurster ты прав. В этом цикле всегда будет только одна итерация. Возможно, это не лучший способ достижения цели, но это работает.

Адиль Малик,

Посмотрите принятый ответ, чтобы узнать, почему это худший / наименее эффективный способ сделать это. (ненужные, .eachне выдерживающие)

Брэд Кент

2

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

document.activeElement.id

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

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

Sparky ака том
источник

1

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

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

Трэвис Хитер
источник

1

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

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

Пудугурти Равиндар
источник

0

Если вы хотите подтвердить, что фокус находится на элементе, то

if ($('#inputId').is(':focus')) {
    //your code
}

Сандип Сингх
источник

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

Ответы: