jquery：焦点在事件运行前跳转

Question

焦点在事件触发前移动到下一个输入字段。任何人都可以帮助我找到错误，或者找出如何自己找到它？

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

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

任何帮助，你可以提供表示赞赏。如果您需要更多信息，请告诉我。

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（）。'