jquery: прыжки с фокуса перед запуском событий

Question

Фокус переходит к следующему полю ввода перед запуском события. Может ли кто-нибудь помочь мне найти ошибку или выяснить, как ее найти?

Цель состоит в том, чтобы поймать событие keyup, проверить, что это вкладка или сдвиг + вкладка, а затем вкладка, как если бы она была табулирована через таблицу. Когда фокус попадает на последний вход, который виден, три строки (см. Скрипт для визуальных) должны перемещаться вместе, чтобы выявлять скрытые входы. Как только до конца входов этой строки, три строки вернутся назад к началу снова, вроде как возврат каретки на пишущей машинке или вставляются в другую строку в таблице.

Прямо сейчас, событие табуляции перемещается только по строке, в которой находится фокус, и она перемещает ее, прежде чем мой скрипт даже начнет работать. Мне просто нужно знать, почему это происходит, чтобы я мог исследовать, как его решить.

Любая помощь, которую вы можете предложить, оценена. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

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().