我如何测试输入是否集中在if结构中？

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!

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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