Javascript/jQuery detect if input is focused

Question

How do I detect when .click event triggers if textarea is already focused?

I have this jquery:

$(".status").on("click","textarea",function(){
        if ($(this) == "focused") {
            // fire this step
        }else{
            $(this).focus();
            // fire this step
    }

its not a duplicate because the other question asks specifically for a jquery solution. — john-jones, Jun 18 '17 at 15:10
@HermannIngjaldsson And so implicitly does this, since the code provided uses jQuery (as it did when originally posted). Thus it **is** a duplicate. — robinCTS, Feb 20 '18 at 00:37

score 374 · Accepted Answer · edited Apr 25 '14 at 20:43

374

With pure javascript:

this === document.activeElement // where 'this' is a dom object

or with jquery's :focus pseudo selector.

$(this).is(':focus');

edited Apr 25 '14 at 20:43

B T

57,525
34
189
207

answered Jul 12 '13 at 12:25

Prinzhorn

22,120
7
61
65

2

I don't know why it is not working.... none of them.. if it's not focused it fires the first step.. but it should fire the else step.. – southpaw93 Jul 12 '13 at 12:39
1

Clicking the textarea will alway focus it. – Prinzhorn Jul 12 '13 at 13:34
5

Note that setting focus with 'focus()' won't work if the node isn't attached to the dom or is hidden (e.g. display:none;) – B T Apr 25 '14 at 21:03
38

thank you for not bringing a jQuery solution. Especially because the pure JS solution is so much shorter too. *tips hat* – Mathias Dec 16 '14 at 23:59
11

@Mathias - You are probably referring to some obscure definition of 'shorter'... – katzenhut Nov 24 '16 at 09:41
12

@katzenhut ha, yeah ... not sure what I was trying to say (back in 2014). I assume I meant 'shorter' as in, doesn't invoke a bunch of library code?! – Mathias Nov 28 '16 at 23:50
Seems there's now a :focus pseudo-selector. So `document.querySelector('textarea:focus')` will return the textarea element that is in focus, or the usual `null` if there isn't one. – Aaron Mason Mar 09 '20 at 00:01
The above seems to work on Chrome, but if you're developing with Cordova, you might find this doesn't work on iOS devices. – Aaron Mason Mar 09 '20 at 02:51

sohaiby · Answer 2 · 2017-07-06T12:22:50.150

1

If you can use JQuery, then using the JQuery :focus selector will do the needful

$(this).is(':focus');

edited Jul 06 '17 at 12:22

answered Jul 12 '13 at 12:26

sohaiby

1,168
3
24
39

score 0 · Answer 3 · answered Jul 12 '13 at 12:25

0

Using jQuery's .is( ":focus" )

$(".status").on("click","textarea",function(){
        if ($(this).is( ":focus" )) {
            // fire this step
        }else{
                    $(this).focus();
            // fire this step
    }

answered Jul 12 '13 at 12:25

Praveen

55,303
33
133
164

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

Did you try:

$(this).is(':focus');

Take a look at Using jQuery to test if an input has focus it features some more examples

edited May 23 '17 at 12:34

Community

1
1

answered Jul 12 '13 at 12:26

Vincent Cohen

878
7
28

Javascript/jQuery detect if input is focused

4 Answers4

Linked

Related