How to select an element that has focus on it with jQuery

Question

How can you select an element that has current focus?

There is no :focus filter in jQuery, that is why we can use something like this:

$('input:focus').someFunction();

What are you actually trying to do so I can know if there is a better approach — TStamper, Feb 05 '09 at 14:48
http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus — gnarf, May 04 '11 at 17:27
Note that you can use `$(':focus')` to find the element currently focused in the current document. — Alexis Wilke, Oct 09 '14 at 03:09

score 153 · Answer 1 · edited Nov 01 '12 at 15:17

153

$(document.activeElement) will return the currently focused element and is faster than using the pseudo selector :focus.

Source: http://api.jquery.com/focus-selector/

edited Nov 01 '12 at 15:17

Andreas Louv

46,145
13
104
123

answered Mar 26 '12 at 15:29

Sam Shiles

10,529
9
60
72

33

*this* should be the chosen answer. no DOM traversal and much faster than any of the other solutions offered here. – Jimmery Jul 24 '12 at 07:38
3

This is the right answer. jQuery docs even say not to use the :focus pseudo-selector when you just want the currently selected element. – Josh Jan 17 '13 at 15:25
2

Yes, even the jquery documentation recommends this method over the pseudo query. – IAmNaN Apr 27 '13 at 01:59
This does not seem to work in Chrome. When I click on an element using this in Opera I am getting the id properly. But in Chrome im getting blank. The other solution above does the same thing though, so this is still the best solution. – Metropolis Jun 20 '13 at 18:54
Sadly this doesn't work in chrome, it always returns body. – Douglas Gaskell Sep 03 '16 at 22:57

score 123 · Answer 2 · edited May 14 '11 at 18:07

123

alert($("*:focus").attr("id"));

I use jQuery.

It will alert id of element is focusing.

I hope it useful for you.

edited May 14 '11 at 18:07

Marcus Whybrow

19,578
9
70
90

answered Jan 14 '10 at 02:28

BiBi

1,271
2
8
2

4

From what I can gather, support for the `:focus` filter has been added to jquery since the OP asked this question, so this answer is now valid. – keithjgrant Jan 05 '11 at 18:40
14

Performance is poor, use document.activeElement whenever possible. – sir_thursday Jul 20 '12 at 19:55
9

jesus - you are really using * as a selector? you know that * selects _ALL_ elements? every td in every damned table. 93 upvotes? – Toskan Oct 30 '12 at 12:42
6

Sam Shiles answer, suggesting use of $(document.activeElement), is a better solution. Straight from the jQuery docs page on the :focus pseudo-selector: "If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree." – Josh Jan 17 '13 at 15:25
@kingjeffrey, it's perfect only if you don't know how poor it's! – gdoron Jun 10 '13 at 08:14

score 32 · Accepted Answer · edited Jun 11 '10 at 04:53

32

Really the best way to do it is to setup a handler for the onFocus event, and then set a variable to the ID of the element that has focus.

something like this:

var id;

$(":input").focus(function () {
     id = this.id;
});

edited Jun 11 '10 at 04:53

nickf

537,072
198
649
721

answered Feb 05 '09 at 14:40

Mike_G

16,237
14
70
101

1

Why $(this).attr('id') use this.id – redsquare Jan 03 '10 at 08:17
3

Becareful because the window can also receive focus, which means this code won't work as expected in all cases. – cbp Aug 06 '10 at 05:03
9

IS window an input? This code says select only input elements. so window does not fire callback. – Morteza Milani Aug 19 '11 at 11:35
4

Sam Shiles answer seems to be the best by far. – Toskan Oct 30 '12 at 14:05
Did not work (for me), use Sams or Marcus answer below instead. – Olof_t Dec 18 '12 at 14:49
Maybe at the time this answers was ok, but not anymore. – TurboHz May 02 '14 at 08:30

score 5 · Answer 4 · edited Nov 01 '12 at 15:18

5

If you use JQuery, you can write a selector like this:

$.expr[':'].focus = function(a){ return (a == document.activeElement); }

You can then select the currently focused element: $(":focus")

Not only form controls can have focus. Any html element with a tabindex can be focused in modern browsers.

edited Nov 01 '12 at 15:18

Andreas Louv

46,145
13
104
123

answered Nov 24 '10 at 18:03

jmanrubia

1,865
20
13

What is the performance of this like? Also $(".:focus") appears to be already implemented by jQuery 1.7.3. It at least works fine without your implementation for me. – Hengjie Aug 23 '12 at 08:30

score 5 · Answer 5 · answered Feb 05 '09 at 18:41

5

Have you tried

$.extend($.expr[':'], {
    focused: function(elem) { return elem.hasFocus; }
});

alert($('input :focused').length);

answered Feb 05 '09 at 18:41

bendewey

39,709
13
100
125

1

`document.hasFocus()` does exist, but such a method or attribute is not available for elements. Tried in Firefox and Chromium. – akaihola Mar 04 '10 at 11:42

score 4 · Answer 6 · edited Oct 08 '12 at 09:29

4

Lifted from the examples for the current jQuery version (1.7) docs:

$(elem).is(":focus");

edited Oct 08 '12 at 09:29

coolguy

7,866
9
45
71

answered Nov 14 '11 at 17:22

TurboHz

2,146
2
16
14

Somnath Muluk · Answer 7 · 2012-05-09T09:57:05.800

1

For checking element has focus or not.

if ($("...").is(":focus")) {
  ...
}

edited May 09 '12 at 09:57

answered May 09 '12 at 09:51

Somnath Muluk

55,015
38
216
226

score 0 · Answer 8 · answered Aug 22 '12 at 11:49

0

Here is the CoffeeScript version of it. Based upon jmanrubia's code:

$.expr[':'].focus = (a) -> a is document.activeElement

You would also call it like so $(".:focus")

answered Aug 22 '12 at 11:49

Hengjie

4,598
2
30
35

How to select an element that has focus on it with jQuery

8 Answers8

Linked

Related