Question

在触发事件之前，焦点移动到下一个输入字段。谁能帮我找到这个bug，或者弄清楚如何自己找到它？

目标是捕获keyup事件，验证它是tab还是shift + tab，然后选项卡就好像它是通过表格进行选项卡一样。当焦点到达可见的最后一个输入时，三行（见视觉小提琴）应该一起移动以显示隐藏的输入。一旦到达该行输入的末尾，这三行将再次滑回到开头，有点像打字机上的回车，或者表格中的不同行。

现在，tab事件只移动了持有焦点的行，并且在我的脚本开始运行之前它正在移动它。我只需要知道为什么会发生这种情况，以便我可以研究如何解决它。

您可以提供的任何帮助表示赞赏。如果您需要更多信息，请与我们联系。

P.S。使用jquery 1.9.1

Link to Fiddle

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;
  }
}

Answer 1

所需要的只是'keydown（）'而不是'keyup（）。'

jquery：在事件运行之前聚焦跳转

1 个答案: