2

我正在使用 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);
        }
    });
});​

另一个编辑：

看起来这可能只是我最好的选择。如果有人有任何其他想法会很棒，但现在我想我只需要这样做。

使用 JavaScript 或 jQuery 检测哪个表单输入具有焦点

4

2 回答 2

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");
   });
});​
于 2012-10-30T18:43:56.933 回答
1

目前还不清楚您要做什么，但这可能会有所帮助。

您可以检测焦点是否已远离父元素的所有子元素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)
  });

50mssetTimeout让浏览器有机会在我们检查之前将焦点移到新元素上。

于 2012-11-20T08:33:04.887 回答