0

jQuery（1.7.2）のfocusin/focusoutイベントに問題があります。

divに2つの入力があります。それらの1つがフォーカスを取得したら、divにクラスを追加したいと思います。どの入力にもフォーカスがなくなった場合にのみ、このクラスを削除したいと思います。

$(function() {
  $('#container').on('focusin',function(){
    $(this).addClass('test');
  }).on('focusout',function(){
    if ($(this).find('input:focus').length) return;
    $(this).removeClass('test');
  });

  $('#container input').on('keydown',function(e) {
    var keycode = e.keyCode || e.which;
    //When Tab or Return, switch input
    if (keycode == 9 || keycode == 13) {
      $($(this).attr('data-target')).focus();
      return false;
    }
  });
});

<div id="container">
    <input type="text" id="a" data-target="#b">
    <input type="text" id="b" data-target="#a">
</div>

http://jsfiddle.net/pqUFX/

マウスで入力をクリックしてフォーカスを切り替えると、正常に機能します。ただし、div内の既存のフォーカスをチェックする場合でも、クラスをkeydown()呼び出して入力のイベント内の他の入力にフォーカスを設定すると、削除されます。$('#b').focus();

おそらく私のせいでreturn false;、タブが2回切り替わらないのでしょうか。これに対する代替ソリューションはありますか？

4

1 に答える 1

1

なぜそれが実際に機能しないのかはわかりませんが（機能するはずです）、次のようなものを使用しないのはなぜですか：

$(function() {
    $('#container input').on('keydown',function(e) {
        var keycode = e.keyCode || e.which;
        //When Tab or Return, switch input
        if (keycode == 9 || keycode == 13) {             
            $($(this).attr('data-target')).focus();
            $(this).parent().addClass("test");
            return false;
        }
    }).focusin(function() {
        $(this).parent().addClass("test");                  
    }).focusout(function() {
        $(this).parent().removeClass("test");                  
    });
});​
于 2012-08-05T14:19:31.873 に答える