focus - jquery: イベント実行前にフォーカスがジャンプする

Question

イベントが発生する前に、フォーカスは次の入力フィールドに移動します。誰かがバグを見つけるのを手伝ったり、自分で見つける方法を見つけたりできますか?

目標は、keyup イベントをキャッチし、それがタブまたはシフト + タブであることを確認してから、テーブルをタブで移動しているかのようにタブすることです。フォーカスが表示されている最後の入力に到達すると、3 つの行 (視覚的には fiddle を参照) が一緒に移動して、非表示の入力が表示されます。その行の入力の最後に達すると、3 つの行が再び最初にスライドして戻ります。これは、タイプライターのキャリッジ リターンや、テーブルの別の行へのタブ移動のようなものです。

現在、タブ イベントはフォーカスを保持している行だけを移動しており、スクリプトが実行を開始する前に移動しています。解決方法を調査できるように、なぜこれが起こっているのかを知る必要があります。

あなたが提供できるどんな助けも大歓迎です。さらに情報が必要な場合はお知らせください。

PS jquery 1.9.1の使用

フィドルへのリンク

jQuery(document).ready(function ($) {
  // bind listeners to time input fields
  //$('.timeBlock').blur(validateHrs);
  $('.timeBlock').keyup(function () {
      var caller = $(this);
      var obj = new LayoutObj(caller);
      if (event.keyCode === 9) {
          if (event.shiftKey) {
              obj.dir = 'prev';
          }
          obj.navDates();
      }
  });

  // bind listeners to prev/next buttons
  $('.previous, .next').on('click', function () {
      var str = $(this).attr('class');
      var caller = $(this);
      var obj = new LayoutObj(caller);
      obj.src = 'pg';
      if (str === 'previous') {
          obj.dir = 'prev';
      }
      obj.navDates();
  });
});

function LayoutObj(input) {
  var today = new Date();
  var thisMonth = today.getMonth();
  var thisDate = today.getDate();
  var dateStr = '';
  var fullDates = $('.dateNum');
  var splitDates = new Array();
  this.currIndex = 0; //currIndex defaults to 0
  this.todayIndex;

  fullDates.each(function (index) {
      splitDates[index] = $(this).text().split('/');
  });

  //traverse the list of dates in the pay period, compare values and stop when/if you find today
  for (var i = 0; i < splitDates.length; i++) {
    if (thisMonth === (parseInt(splitDates[i][0], 10) - 1) && thisDate === parseInt(splitDates[i][1], 10)) {
      thisMonth += 1;
      thisMonth += '';
      thisDate += '';
      if (thisMonth.length < 2) {
          dateStr = "0" + thisMonth + "/";
      }
      else {
          dateStr = thisMonth + "/";
      }
      if (thisDate.length < 2) {
          dateStr += "0" + thisDate;
      }
      else {
          dateStr += thisDate;
      }
      fullDates[i].parentNode.setAttribute('class', 'date today');
      this.todayIndex = i;
      break;
    }
  }

  //grab all of the lists & the inputs
  this.window = $('div.timeViewList');
  this.allLists = $('.timeViewList ul');
  this.inputs = $('.timeBlock');

  //if input`isn't null, set currIndex to match index of caller
  if (input !== null) {
      this.currIndex = this.inputs.index(input);
  }
  //else if today is in the pay period, set currIndex to todayIndex
  else if (this.todayIndex !== undefined) {
      this.currIndex = this.todayIndex;
  }
  //(else default = 0)

  //grab the offsets for the cell, parent, and lists.
  this.winOffset = this.window.offset().left;
  this.cellOffset = this.inputs.eq(this.currIndex).offset().left;
  this.listOffset = this.inputs.offset().left;

  //grab the width of a cell, the parent, and lists
  this.cellWidth = this.inputs.outerWidth();
  this.listWidth = this.inputs.last().offset().left + this.cellWidth - this.inputs.eq(0).offset().left;
  this.winWidth = this.window.outerWidth();

  //calculate the maximum (left) offset between the lists and the parents
  this.offsetMax = (this.listWidth - this.winWidth);

  //set default scroll direction as fwd, and default nav as tab
  this.dir = 'next';
  this.src = 'tab';

  //grab the offsets for the cell, parent, and lists.
  this.cellOffset = this.inputs.eq(this.currIndex).offset().left;
  this.listOffset = this.inputs.eq(0).offset().left;
  this.winOffset = this.allLists.parent().offset().left;

  //calculate the maximum (left) offset between the lists and the parents
  this.offsetMax = (this.listWidth - this.winWidth);
}
LayoutObj.prototype.focusDate = function () {
  this.inputs.eq(this.currIndex).focus();
};

LayoutObj.prototype.slideLists = function (num) {
  this.listOffset += num;
  this.allLists.offset({ left: this.listOffset });
};

LayoutObj.prototype.navDates = function () {

  if (!this.inWindow()) {
      var slide = 0;
      switch (this.src) {
          case 'pg':
              slide = this.winWidth - this.cellWidth;
              break;
          case 'tab':
              slide = this.cellWidth + 1;
              break;
          default:
              break;
      }
      if (this.dir === 'next') {
          slide = -slide;
      }
      this.slideLists(slide);
  }
  this.focusDate();
};

LayoutObj.prototype.inWindow = function () {
  //detects if cell intended for focus is visible in the parent div
  if ((this.cellOffset > this.winOffset) && ((this.cellOffset + this.cellWidth) < (this.winOffset + this.winWidth))) {
    return true;
  }
  else {
    return false;
  }
}