0

I have a selector that selects multiple elements. I want to check if at least one of these elements has the focus.

By experimenting, I noticed that .is(":focus") and .has(":focus") didn't work when dealing with multiple elements, see below:

console.log( $('.text-block').is(":focus") ); // prints false
console.log( $('.text-block').has(":focus") ); // prints empty object array
console.log( $('.text-block').filter(":focus") ); // prints empty object array
console.log( $('.text-block:focus') ); // prints one element (works!)

as :focus selector seems the only way to go, my question is: how to do if my elements ($('.text-block')) are in a variable (like $myElements) ?

(Second question would be to understand why only :focus selector works for me.)

4
  • 1
    What do you mean by "at least one element has the focus"? You can only have focus on one single element in your document at a time, that element is document.activeElement
    – elclanrs
    Dec 3, 2013 at 1:48
  • sorry, i mean if any of the elements have the focus, thanks
    – Matthew
    Dec 3, 2013 at 1:51
  • When are you checking when these inputs have focus? Are you using .focus() or are you checking in another function?
    – Dom
    Dec 3, 2013 at 2:31
  • I think elclanrs was suggesting is: $('.text-block').is(document.activeElement).
    – RobG
    Dec 3, 2013 at 2:53

3 Answers 3

1

Loop through each element and test if has :focus.

$('.text-block').each(function() {
    if ($(this).is(':focus')) {
        console.log('This element has focus!');
    }
});

I tested this with some basic HTML inputs and it works: http://jsbin.com/aTaqagOz/1/ (the JSBin I worked on was working but the preview appears not to)

Maybe your elements aren't focusing correctly?

1
  • I tested it and it seemed to work in the JSBin editor but not in the preview/share mode. You might want to try in your development environment. Edit: I just tried it in mine and it appears to work, although the focus event isn't being fired when I focus to the element, which is odd.
    – Jared
    Dec 3, 2013 at 2:28
0

as you can read here http://api.jquery.com/focus-selector/ is(":focus") is the way to go. if it returns false that means it does not have the focus.

you can also get he focused element by $( document.activeElement ).

as it stated in the jquery doc it supported starting with version 1.6 I know it is a long shot but may be you have an older version.

4
  • well according to my logs, is(":focus") didn't work, check code above, selector :focus (without is()) worked though
    – Matthew
    Dec 3, 2013 at 1:52
  • i see because $('.text-block') returns an array i m not sure how is working for it. checks all of them, first one only last one only. you can loop by each or just check $('.text-block:focus').length
    – Onur Topal
    Dec 3, 2013 at 2:29
  • wish i could use $('.text-block:focus').length but the question, what if the elements are in a variable $textBlockElements
    – Matthew
    Dec 3, 2013 at 3:03
  • did you try find instead of filter. if it returns the object that means focused element is actually a sub element of the $textBlockElements if this is the case that makes perfect sense.
    – Onur Topal
    Dec 4, 2013 at 4:28
0

Try this:

$('text').each(function() {
    if ($(this).is(':focus')) {
        console.log('This element has focus!');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.