jQuery alternative for document.activeElement

Question

What I wanted to do is figure out whenever the user is engaged with an INPUT or TEXTAREA element and set a variable flag to true... and set that flag to false immediately after the user is no longer engaged with them (ie. they've clicked out of the INPUT/TEXTAREA elements).

I used jQuery's docuemnt.ready function to add the onclick attribute to my body element and assign it to my getActive() function.

The code for the getActive() function is as follows:

function getActive()
{
  activeObj = document.activeElement;
  var inFocus = false;
  if (activeObj.tagName == "INPUT" || activeObj.tagName == "TEXTAREA")
  {
     inFocus = true;
  }
}

I'd really like to keep by project withing the jQuery framework, but can't seem to find a way of accomplishing the same logic above using JUST jQuery syntax.

score 19 · Accepted Answer · answered Jul 25 '10 at 06:53

19

You want the focus and blur event handlers. For example...

var inFocus = false;
$('input, textarea').focus(function() {
  inFocus = true;
});

$('input, textarea').blur(function() {
  inFocus = false;
});

I'm pretty sure that a comma will get you input OR textarea, but you get the idea if that doesn't pan out

answered Jul 25 '10 at 06:53

Rob

5,525
1
24
26

I put this in, but it doesn't seem to get called when a user starts typing into the INPUT or TEXTAREA element. – Brownbay Jul 25 '10 at 07:18
As an addendum to the point above, I'm fairly new to JavaScript and jQuery... I didn't realize that using those functions OUTSIDE the document.ready function would have JS bind those events to essentially non-existent elements as the DOM has not yet loaded. – Brownbay Jul 26 '10 at 04:58

score 7 · Answer 2 · answered Sep 09 '13 at 19:21

7

function getActive(){
   return $(document.activeElement).is('input') || $(document.activeElement).is('textarea');
}

answered Sep 09 '13 at 19:21

user1933288

101
1
1

Shital Shah · Answer 3 · 2014-01-13T08:17:32.813

For the original question about figuring out if the currently focused element is any of those user input elements, below should work:

function isInputElementInFocus() {
    return $(document.activeElement).is(":input");
}

Conceptually I don't like this approach for generic case where you are listening to global events (like key strocks) and trying to decide if these should be handled by your global handler or be ignored because it is meant for someone else. The reason I don't like it because it's not future safe and also who knows what else that someone can be besides input elements.

Another more robust but tricky to implement idea is to test if event is meant for an element that has tabIndex >= 0. The input elements have tabIndex === 0 set by default so it becomes more or less similar to above approach. You can easily check this by event.target.tabIndex >= 0 without need to rely on document.activeElement.

The gotchas here (if you want to be generic) is that you also need to make sure that event.target element is neither in another branch in DOM hierarchy nor there is someone else between event.currentTarget and event.target that has tabIndex >= 0. You get the idea: This can become murky but I just thought to jot it down if someone else is in need of generic solution.

score 2 · Answer 4 · answered Jul 25 '10 at 06:55

2

You can do something like this :

var focusItem = null; 
$('input, textarea').focus( function() { 
    focusItem = this; 
});

answered Jul 25 '10 at 06:55

Soufiane Hassou

17,257
2
39
75

Just to clarify, 'focusItem' would then represent the INPUT or TEXTAREA DOM Object? – Brownbay Jul 25 '10 at 07:02
it would represent to one who's focused regardless of his type. So it can be either an INPUT or a TEXTAREA – Soufiane Hassou Jul 25 '10 at 07:12

score 1 · Answer 5 · answered Jul 25 '10 at 06:52

1

Iis the .blur() event what you're looking for?

answered Jul 25 '10 at 06:52

chryss

7,459
37
46

jQuery alternative for document.activeElement

5 Answers5

Linked