Maintiens du focus sur un élément

Bonjour je suis en train de réaliser un plugin permettant de construire des tableaux de calculs avec un certains niveau de contrôle. L'utilisateur pourra par exemple sélectionner des lignes dans le but de les monter ou de les descendres ou encore les supprimer. Le fonctionnement de ces mécanismes est géré via des boutons et fonctionne correctement. Cependant j'ai un problème lorsque je souhaite gérer ces contrôles via clavier.

En effet j'ai ajouté des "events" "keyup" et "keypress" afin de savoir lorsque l'utilisateur appuis sur les touches haut et bas. En fonction de la touche j'appelle l'une de mes deux fonctions de mouvement pour monter ou descendre une ligne cependant l'action ne fonctionne qu'une seule fois.

D'après ce que je visualise l'action fonctionne car la ou les lignes sélectionnées sont bien focus dès la fin de l'action je perd le focus sur cet élément et donc l'écouteur ne fait plus effet et l'action ne se réalise pas plus d'une fois.

Une méthode pour descendre une ligne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 downRow: function ( e ) { var selector = [], rows = Array.prototype.slice.call( this.elt.querySelectorAll( 'tbody tr' ) ).reverse( ) rows.forEach( function ( row, i ) { if( rows.indexOf( row ) ) { if( row.classList.contains( 'selected' ) && i !== 0 ) { selector.push( row ) $.when( row.parentNode.removeChild( row ) ).then( function( ) { rows.splice( i, 1 ) rows[i-1].insertAdjacentElement( 'afterEnd', row ) rows.splice( i-1, 0, row ) } ) } } } ) this.totalizer( ) },
Méthodes pour écouter et appliquer les events
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 listen: function ( ) { this.$elt .on( 'change', '.mt-cell-selector', $.proxy( this.selectRow, this ) ) .on( 'change', '.mt-cell-selector-all', $.proxy( this.selectAll, this ) ) .on( 'change', '.mt-cell-input', $.proxy( this.rowCalc, this ) ) .on( 'keypress', $.proxy( this.keypress, this ) ) if( this.eventSupported( 'keydown' ) ) { this.$elt.on( 'keydown', $.proxy( this.keydown, this ) ) } $( '.mt-ctrl-del' ).on( 'click', $.proxy( this.remove, this ) ) $( '.mt-ctrl-up' ).on( 'click', $.proxy( this.upRow, this ) ) $( '.mt-ctrl-down' ).on( 'click', $.proxy( this.downRow, this ) ) }, eventSupported: function( eventName ) { var isSupported = eventName in this.$elt if( !isSupported ) { this.$elt.setAttribute( eventName, 'return;' ) isSupported = typeof this.$elt[eventName] === 'function' } return isSupported }, move: function ( e ) { switch( e.keyCode ) { case 38: // up arrow e.preventDefault( ) this.upRow( ) break case 40: // down arrow e.preventDefault( ) this.downRow( ) break } e.stopPropagation( ) }, keydown: function ( e ) { this.suppressKeyPressRepeat = ~$.inArray( e.keyCode, [40,38,9,13,27] ) this.move( e ) }, keypress: function ( e ) { if( this.suppressKeyPressRepeat ) return this.move( e ) }
J'espère avoir été clair :) d'avance merci de l'aide