Question

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

非常感谢任何帮助，谢谢。

编辑：

我已经将jsfiddle更新为更接近我想要的东西，所以没有混淆。这里的问题是我有2个输入字段绑在一起。当一个人聚焦时，我想长出一个并缩小另一个，如果两者都没有聚焦，我想将它们重置为原始宽度。我可以通过一些全局变量来解决问题，这些变量会更新焦点并跟踪焦点是否在焦点之内但是我想看看是否存在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

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

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

Answer 2

你想要做什么并不太清楚，但这可能会有所帮助。

您可以检测焦点是否已远离父元素parentEl的所有子元素：

  // Trigger when any children have lost focus
  parentEl.on('focusout', function() {
    // Check where focus has moved to
    setTimeout(function() {
      if(parentEl.find(":focus").length == 0){
        // Focus has moved outside the parent element
      }else{
        // Focus has moved to another element within the parent element
      }
    }, 50)
  });

50ms setTimeout使浏览器有机会在我们检查之前将焦点移动到新元素。

在jquery的焦点上，检测焦点是否移位或没有元素有焦点

2 个答案: