Find if a textbox is currently selected

Question

How would I find if a textbox (or textarea) currently is in focus? I don't care to know which one it is, I just need to know if one is in focus (has the cursor in it). How would I do this with javascript and jquery?

score 22 · Accepted Answer · answered Jan 01 '11 at 19:11

22

Since you have found document.activeElement, you can check its nodeName.

if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') {
    // ....
}

Something like that.

answered Jan 01 '11 at 19:11

Thai

10,746
2
45
57

Thanks, but how do I get the jQuery object from document.activeElement? – Leticia Meyer Jan 01 '11 at 19:13
This does not check for editable HTMLDivElements. See my answer below. – Lenar Hoyt Dec 16 '16 at 17:53

score 8 · Answer 2 · edited Jan 01 '11 at 19:22

8

Ok, just figured it out. Here's what I did:

function checkFocus() {

  if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {

  //Something's selected

  return true;

 }

}

edited Jan 01 '11 at 19:22

David Thomas

249,100
51
377
410

answered Jan 01 '11 at 19:16

Leticia Meyer

217
2
3
9

Someone mark this as the answer, it says I have to wait 2 days. :) – Leticia Meyer Jan 01 '11 at 19:22
2

you're the only one who *can* mark this as the answer. Also, take a look at the [Stack Overflow Markdown help-page](http://stackoverflow.com/editing-help/), for guidance on how to format your answers, particularly code samples. – David Thomas Jan 01 '11 at 19:22
Note that this will work on all modern browsers, but it will *not* work on many outdated browsers. Have a look at [this answer](http://stackoverflow.com/questions/1009777/determining-which-element-has-focus/1009787#1009787) for a technique to overcome this. – lonesomeday Jan 01 '11 at 19:38

score 3 · Answer 3 · answered May 29 '16 at 15:10

Extending the accepted answer by a check for editable HTMLDivElements:

if (document.activeElement.nodeName == 'TEXTAREA'
    || document.activeElement.nodeName == 'INPUT'
    || (document.activeElement.nodeName == 'DIV'
        && document.activeElement.isContentEditable)) {
    // …
}

JakeParis · Answer 4 · 2011-01-01T19:16:16.227

2

$('#yourTextAreaID:focus');

would not work. :) But

$('#yourTextAreaID').focus(function(){
    // do something
});

would excecute the //do something code when the element receives focus.

edited Jan 01 '11 at 19:16

answered Jan 01 '11 at 19:01

JakeParis

11,056
3
42
65

Ok, but at any given time (not neccesarily when the user clicks a textbox) how would I check if any textbox has focus? – Leticia Meyer Jan 01 '11 at 19:06
Given that the OP doesn't care "which one it is," I'd suggest amending the selector to: `$('textarea:focus, input:text:focus')...` – David Thomas Jan 01 '11 at 19:07
I just found document.activeElement. How would I check if that is a textbox or textarea? – Leticia Meyer Jan 01 '11 at 19:08
@David Thanks, that's cleaner. – JakeParis Jan 01 '11 at 19:10
1

I don't recognise the `:focus` pseudo-selector, and nor does the API or a quick test... – lonesomeday Jan 01 '11 at 19:10
@lonesomeday, interesting catch: since it works under CSS I'd never thought to question whether or not it worked under jQuery. – David Thomas Jan 01 '11 at 19:13

Naveed · Answer 5 · 2011-01-01T19:18:05.553

1

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});

Also Try:

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

http://jsfiddle.net/4KVvV/

edited Jan 01 '11 at 19:18

answered Jan 01 '11 at 19:03

Naveed

41,517
32
98
131

as @lonesome pointed out above, :hover is not a real jquery selector. I thought it was too, but when I checked the documentation, I couldn't find it mentioned. – JakeParis Jan 02 '11 at 01:53

Find if a textbox is currently selected

5 Answers5

Linked