Simuler la fonction de la touche de tabulation en javascript

Il suffit de se concentrer sur le prochain champ de saisie (en invoquant la méthode focus () sur cet élément de saisie), par exemple, si vous utilisez jQuery, ce code va simuler la touche de tabulation lorsque Enter est pressé:

 var inputs = $(':input').keypress(function(e){ if (e.which == 13) { e.preventDefault(); var nextInput = inputs.get(inputs.index(this) + 1); if (nextInput) { nextInput.focus(); } } }); 

Il fallait imiter la fonctionnalité de l'onglet il y a quelque temps, et maintenant je l'ai publié comme une bibliothèque qui utilise jquery .

EmulateTab : Un plugin jQuery pour imiter l'onglet entre les éléments d'une page.

Vous pouvez voir comment cela fonctionne dans la démo .

 if (myTextHasBeenFilledWithText) { // Tab to the next input after #my-text-input $("#my-text-input").emulateTab(); } 

 function nextField(current){ for (i = 0; i < current.form.elements.length; i++){ if (current.form.elements[i].tabIndex == current.tabIndex+1){ current.form.elements[i].focus(); if (current.form.elements[i].type == "text"){ current.form.elements[i].select(); } } } } 

Ceci, lorsqu'il est fourni avec le champ actuel, sautera la mise au point sur le champ avec l'index de l'onglet suivant. L'utilisation serait la suivante

 <input type="text" onEvent="nextField(this);" /> 

Dans la première question, vous n'avez pas besoin d'un auditeur d'événements sur chaque contribution qui serait un gaspillage.

Au lieu de cela, écoutez la clé de saisie et trouvez l'élément d'utilisation d'élément actuellement concentré. Éléments document.activeElement

 window.onkeypress = function(e) { if (e.which == 13) { e.preventDefault(); var nextInput = inputs.get(inputs.index(document.activeElement) + 1); if (nextInput) { nextInput.focus(); } } }; 

Un auditeur d'événement est meilleur que beaucoup, en particulier sur les navigateurs de faible puissance / mobiles.

Cela simule un onglet à travers un formulaire et met l'accent sur la prochaine entrée lorsque la touche enter est enfoncée.

 window.onkeypress = function(e) { if (e.which == 13) { e.preventDefault(); var inputs = document.getElementsByClassName('input'); for (var i = 0; i < inputs.length; i++) { if (document.activeElement.id == inputs[i].id && i+1 < inputs.length ) { inputs[i+1].focus(); break; } } 

J'ai adapté la réponse de ltiong_sh pour travailler pour moi:

 function nextField(current){ var elements = document.getElementById("my-form").elements; var exit = false; for(i = 0; i < elements.length; i++){ if (exit) { elements[i].focus(); if (elements[i].type == 'text'){ elements[i].select(); } break; } if (elements[i].isEqualNode(current)) { exit = true; } } }