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
– adeneo, Commented Feb 14, 2013 at 15:49

BenM · Accepted Answer · 2013-02-14 16:01:49Z

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, 2013 at 16:01

answered Feb 14, 2013 at 15:39

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

BenM Over a year ago

Yes, it does. I was mor illustrating the use of is(':focus').

adeneo Over a year ago

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!

BenM Over a year ago

Indeed it is, but 'ours is not to reason why'... ;)

Josh Over a year ago

@adeneo you're right. make it a answer but i guess its too late now... :)

dezman Over a year ago

@adeneo, it would be sweet if you showed me what your talking about.

|

user806273 · Accepted Answer · 2013-02-14 15:36:50Z

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, 2013 at 15:36

user806273

5 Comments

dezman Over a year ago

For some reason, this still fires after you have given #inputSize focus, but then clicked somewhere else.

user806273 Over a year ago

did you remove the click handler? Maybe I'm misunderstanding what you're trying to do?

user806273 Over a year ago

When you say 'this still fires' what do you mean then? You want something to happen when the input gets focus, right?

dezman Over a year ago

if there is focus and they press up/down on the keyboard i want the respective alert to come up

user806273 Over a year ago

ohhh, I see, I will try to modify my answer to address what you want

Community · Accepted Answer · 2017-05-23 12:12:31Z

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;
            }
        });
    }
});

dezman · Accepted Answer · 2013-02-14 16:00:43Z

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, 2013 at 16:00

dezman

19.6k13 gold badges58 silver badges92 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

9 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related