Як отримати сфокусований елемент за допомогою jQuery?


345

Як користуватися jQuery, як я можу отримати елемент введення, у якому фокус каретки (курсора)?

Або іншими словами, як визначити, чи вхід має фокус карети?


Можливий дублікат stackoverflow.com/questions/967096/…
bart s

Можливий дублікат: stackoverflow.com/questions/516152 / ...
Sam Shiles

Відповіді:


740
// 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 Що ви маєте на увазі "має каре" ? зосереджений? миша на ньому?
gdoron підтримує Моніку

ну ось моя ситуація: коли я клацаю певний елемент, я хочу розмістити символ в останньому зосередженому вхідному текстовому елементі. В основному елемент, на якому фокус був останній або правий, перш ніж клацнути на цьому конкретному елементі.
Дейв

1
@dave Це неможливо зробити. Я думаю, що лише IE має цю особливість, але ви ставите інше запитання, ви повинні зробити це в новому запитанні.
gdoron підтримує Моніку

3
Мені подобається, як ви використовували $ префіксне ім'я змінної $focused, так як я припускаю, що ви робите це для позначення var - об'єкт jquery. TYVM.
Валамас


6

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

(1). $(document.activeElement)працює як очікується у Firefox, Chrome та Safari.

(2). $(':focus')працює як очікується у Firefox та Safari.

Я перейшов до миші, щоб ввести «ім’я», і натиснув клавішу Enter на клавіатурі, потім я спробував отримати сфокусований елемент.

(1). $(document.activeElement)повертає введення: text: ім'я, як очікувалося в Firefox, Chrome та Safari, але воно повертає введення: submit: addPassword в IE9

(2). $(':focus')повертає введення: 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

Спробуйте це:

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

Так, тому ця петля матиме лише одну ітерацію. попередження - це лише продемонструвати приклад. Якщо у вас є ця змінна, ви можете все з потрібним елементом.
Аділ Малик

Як можна сфокусувати більше одного елемента?
Andreas Furster

@AndreasFurster ти маєш рацію. У цьому циклі завжди буде лише одна ітерація. Це може бути не найкращим способом досягнення мети, але це працює.
Аділ Малик

Дивіться прийняту відповідь, щоб дізнатися, чому це найгірший / найменш ефективний спосіб зробити це. (зайве .eachневідповідання)
Бред Кент

2

Як це ніхто не згадав ..

document.activeElement.id

Я використовую IE8, і не перевіряв його в жодному іншому браузері. У моєму випадку я використовую його, щоб переконатися, що поле є мінімум 4 символами та зосереджене перед тим, як діяти. Після введення 4-го числа він спрацьовує. Поле має ідентифікатор 'рік'. Я використовую..

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

1

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

$(':focus') дасть вам масив елементів, як правило, одночасно зосереджений лише один елемент, тому це краще, лише якщо ви якось зосереджені на декількох елементах.



0

Якщо ви хочете підтвердити, чи фокус знаходиться з елементом, тоді

if ($('#inputId').is(':focus')) {
    //your code
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.