javascript - 如何测试输入是否在 if 结构中具有焦点？

Question

我现在在这里有这段代码，但是当你点击输入后，警报仍然出现，当它没有焦点时。如果可能的话，我也想摆脱点击功能，这样它只会在输入有焦点时发出警报。

$('#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;
            }
        });
    }
});

谢谢！

Answer 1

只需绑定到keydown输入上的事件。无需检查焦点，因为它暗示：

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

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

Answer 2

有一个专门用于焦点的处理程序：

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

当具有给定 ID 的输入具有焦点时，这将调用传递的函数。

Answer 3

您可以使用document.activeElement测试它是否是焦点元素，如下所示：

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

请注意，尽管大多数时候您的操作是在另一个元素上触发的，所以如果说您单击了一个按钮，那么它将具有焦点并且现在是活动元素，因此您无法通过按钮检查来检查这一点，因为该元素已经在大多数情况下，在您的事件触发时更改。

所以，你最终可能会成为

$('#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;
    }
});