Depuis que les navigateurs intègrent des onglets, on a tous l’habitude d’utiliser la touche tabulation de notre clavier pour naviguer entre les onglets.

Pourquoi ne pas avoir la même fonctionnalité dans un formulaire K2 ?

C’est une fonctionnalité assez facile à implémenter, via le code Javascript suivant :

function checkTabPress(e) { 
	"use strict"; 
 	e = e || event; 
 	var activeElement; 
	if (e.keyCode == 9) { 
		// tabulation pressed
		if($(".tab.selected").closest('li').nextAll(':has(.tab):first').html() == null)
		{	// we are on the last tab, so we go back on the first one
			console.log('first tab');	
			$('.tab:first').click();	
		}	
		else	
		{	
			// Select next tab
			console.log('next tab');	
			$(".tab.selected").closest('li').nextAll(':has(.tab):first').find('.tab').click();	
		}	
	}
}

// We attach the checkTabPress function to the "keyup" event
var body = document.querySelector('body');body.addEventListener('keyup', checkTabPress);
Javascript à ajouter a notre formulaire

Une fois ce javascript ajouté, il ne reste plus qu’a lancer le formulaire et à utiliser la touche tabulation pour changer d’onglet.

 

Enjoy  😎

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *