How can I test whether input has focus in an if structure?

Question

I've got this code here now, but the alerts still come up after you click on the input, when it doesn't have focus. I would like to get rid of the click function too, if possible, so that it only alerts when the input has focus.

$('#inputSize').click(function(){
    if ($('#inputSize').is(':focus')){
        $(document).keydown(function(e){
            if (e.keyCode == 38) { 
               alert( "up pressed" );
               return false;
            }
                if (e.keyCode == 40) { 
               alert( "down pressed" );
               return false;
            }
        });
    }
});

Thanks!

You're binding a keydown event inside a click function, which will rebind the keydown event multiple times, causing issues. What exactly is it you're trying to do, as this is probably not the way to do it. — adeneo, Feb 14 '13 at 15:49

BenM · Accepted Answer · 2013-02-14T16:01:49.087

2

Just bind to the keydown event on the input. There's no need to check for focus, since it's implied:

$('#inputSize').keydown(function(e) {    
    if (e.keyCode == 38) 
    { 
       alert( "up pressed" );
       return false;
    }

    if (e.keyCode == 40) 
    { 
       alert( "down pressed" );
       return false;
    }
});

edited Feb 14 '13 at 16:01

answered Feb 14 '13 at 15:39

BenM

52,573
26
113
168

Yes, it does. I was mor illustrating the use of `is(':focus')`. – BenM Feb 14 '13 at 15:45
This is just strange? Binding the keydown event on the `document`, and then doing nothing unless `#inputSize` has focus. The correct way to do this would be to bind the keydown event on the `#inputSize` element, not the document! – adeneo Feb 14 '13 at 15:52
Indeed it is, but 'ours is not to reason why'... ;) – BenM Feb 14 '13 at 15:54
@adeneo you're right. make it a answer but i guess its too late now... :) – Josh Feb 14 '13 at 15:54
@adeneo, it would be sweet if you showed me what your talking about. – dezman Feb 14 '13 at 15:55
Is it just $('#inputSize').keydown(function(){ ... }); ? – dezman Feb 14 '13 at 15:56
@Josh - Sure, it would look like this [**FIDDLE**](http://jsfiddle.net/JmWST/1/) ... – adeneo Feb 14 '13 at 16:00
@adeneo I'm not the owner of this question, i merely made a comment since you guys beat me to the punch line. – Josh Feb 14 '13 at 16:42
@Josh - That's my bad, typed the wrong name. Does'nt really matter as it seems the issue is solved. – adeneo Feb 14 '13 at 16:43

score 1 · Answer 2 · answered Feb 14 '13 at 15:36

1

There is a handler specifically for focus:

$('#inputSize').focus(function () {});

This will call the function passed when the input with the given ID has focus.

answered Feb 14 '13 at 15:36

For some reason, this still fires after you have given #inputSize focus, but then clicked somewhere else. – dezman Feb 14 '13 at 15:40
did you remove the click handler? Maybe I'm misunderstanding what you're trying to do? – Feb 14 '13 at 15:41
When you say 'this still fires' what do you mean then? You want something to happen when the input gets focus, right? – Feb 14 '13 at 15:43
if there is focus and they press up/down on the keyboard i want the respective alert to come up – dezman Feb 14 '13 at 15:44
ohhh, I see, I will try to modify my answer to address what you want – Feb 14 '13 at 15:44

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

You can test if it's a focused element using document.activeElement as below:

  if($('#inputSize') == document.activeElement) {
      // #inputsize is focused
    }

Note though that most of the time your actions are triggered on another element, so if say you clicked a button then it would have focus and now be the active element, so you couldn't check this with a button check, because the element's already changed by the time your event fired, in most cases.

So , you might end up as

$('#inputSize').click(function(){

      if($('#inputSize') == document.activeElement){
        $(document).keydown(function(e){
            if (e.keyCode == 38) { 
               alert( "up pressed" );
               return false;
            }
                if (e.keyCode == 40) { 
               alert( "down pressed" );
               return false;
            }
        });
    }
});

score 0 · Answer 4 · answered Feb 14 '13 at 16:00

0

$('#inputSize').keydown(function(e) {
    if (e.keyCode == 38) 
    { 
       alert( "up pressed" );
       return false;
    }
    if (e.keyCode == 40) 
    { 
       alert( "down pressed" );
       return false;
    }
});

answered Feb 14 '13 at 16:00

dezman

18,087
10
53
91

How can I test whether input has focus in an if structure?

4 Answers4