Discussion :

[Darkaurora]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
peut être serait-il souhaitable que tu fasses un petit exemple simple de mise en application de tes méthodes afin de pouvoir identifier/visualiser le problème.