jquery - 在jquery的focusout上，检测焦点是否移动或没有元素获得焦点

Question

我正在使用 jquery 1.8.2，有 2 个输入字段，并且想要一种方法来检测每个输入字段是否有焦点，或者都没有焦点。

任何帮助将不胜感激，谢谢。

编辑:

我已经更新了 jsfiddle，使其更接近我想要的，这样就不会造成困惑。这里的问题是我有两个连接在一起的输入字段。我想在一个聚焦时增大一个并缩小另一个，如果两个都没有聚焦，我想将两者重置为原始宽度。我可以对一些全局变量进行重手操作，这些全局变量会在焦点上更新并跟踪两者是否处于焦点内或焦点外，但我想先看看是否存在 jquery 解决方案。这是更新后的 jsfiddle，其中包含一个用于切换重置动画的按钮，以便您可以看到它此时的跳跃情况:

http://jsfiddle.net/LZn85/12/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>


<input class="searchy-search input1" />
<input class="searchy-search input2" />
<p>who has focus?</p>
<div class="focus-who jquery-focus"></div>

<button class="out-focus">toggle focus out</button>​

$(document).ready(function() {
    $('.focus-who').html('init');
    $('.input1').val('some long string of text');
    $('.input2').val('some long string of text');

    $('.searchy-search').focusin(function() { 
        var $shrinkSelector;
        if($(this).hasClass('input1')) {
            $shrinkSelector = $('.input2');
        } else if($(this).hasClass('input2')) {
            $shrinkSelector = $('.input1');
        }   
        var initWidth = 100;
        var inputVal = $(this).val();
        var inputLength = inputVal.length;

        if(inputLength > 16) {
            var offset = ((inputLength - 16) * 6); 
            var growWidth = initWidth + offset;
            var shrinkWidth = initWidth - offset;
            var aniTime = 200;
            $(this).animate({width: growWidth + 'px'}, aniTime);
            $shrinkSelector.animate({width: shrinkWidth + 'px'}, aniTime);
        }  
    });
    var outFocus = false;
    $('.out-focus').click(function() {
        outFocus = !outFocus;
    });
    $('.searchy-search').focusout(function() {
        if(outFocus) {
            $('.searchy-search').animate({width: '130px'}, 200);
        }
    });
});​

另一个编辑:

看起来这可能是我最好的选择。如果有人有任何其他想法，那就太好了，但现在我想我只能接受这个。

Detect which form input has focus using JavaScript or jQuery

Answer 1

我认为这不适用于 focusout 事件，因为 focusout 事件发生在 focus 事件之前。因此，在浏览器知道哪个元素现在具有焦点之前，您的代码就会被触发。是否有理由必须检查 focusout 事件？您可以做一些同时使用 focus 和 focusout 事件的事情:

$(document).ready(function() {
   $('.focus-who').html('init');

   $('.searchy-search').focus(function() {
       $('.jquery-focus').html($(this).attr("id"));
   });

   $('.searchy-search').focusout(function() {
       $('.jquery-focus').html("nothin");
   });
});​