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

あなたが何をしようとしているのかはあまり明確ではありませんが、これは役立つかもしれません。

親要素のすべての子からフォーカスが移動したかどうかを検出できます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)
  });

50 ミリ秒setTimeoutは、ブラウザーがチェックする前にフォーカスを新しい要素に移動する機会を与えます。

于 2012-11-20T08:33:04.887 に答える
1

focusout イベントは focus イベントの前に発生するため、これは focusout イベントでは機能しないと思います。したがって、どの要素が現在フォーカスされているかをブラウザが認識する前に、コードが起動します。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 に答える