jQuery/Javascript passer le focus à l'élément suivant tout en tabulant la page

Question

Je suis en train de construire un plugin 'tag input' avec jQuery pour le moment et j'ai rencontré une petite pierre d'achoppement.

J'ajoute un bouton après une entrée de texte dans un formulaire, et en utilisant javascript pour fournir des fonctionnalités pour le bouton. Lorsque vous cliquez sur le bouton (ou que vous appuyez sur le retour dans l'entrée), la valeur de l'entrée est ajoutée à une liste de points. L'entrée est ensuite effacée et recentrée.

Mon problème se produit lorsque je tabule à travers l'interface, le bouton après que l'entrée gagne le focus lorsque vous tabulez sur elle, mais je veux annuler ce comportement. Je pourrais simplement flouter le bouton mais je préférerais que le bouton passe sur le prochain élément focalisable.

par exemple. J'ai trois entrées dans mon formulaire: text-input-1, button, text-input-2. Lorsque l'entrée de texte-1 est mise au point et que j'appuie sur la touche Tab, je veux que le focus passe à l'entrée de texte-2 plutôt qu'au bouton.

Est-ce que cela peut être fait? Merci d'avance.

Answer 1

Ah, j'ai répondu à ma propre question avec l'aide de Teja (+1).

Tout ce que je devais faire était d'appliquer un index de tabulation négative au bouton!

Answer 2

Modifiez l'ordre de l'index des onglets, attribuez un indice de texte de 1 à 100 et une entrée de texte de 2 à 200 et un nombre supérieur à 200 au bouton. Cela devrait résoudre le problème.

Answer 3

Ceci est assez facile dans IE, qui accepte un nombre entier négatif pour la propriété tabIndex qui le retirer de l'ordre de tabulation:

<input type="button" tabindex="-1" value="Can't tab to me!" /> 

Ce ne fait pas partie du HTML 4.01 specification for tabindex, qui permet seulement un entier entre 0 et 32767. Cependant, il est spécifié dans le HTML 5 drafts et pris en charge dans la plupart des principaux navigateurs.

La méthode la plus simple à laquelle je peux penser dans les navigateurs qui ne le prennent pas en charge serait d'attendre l'événement onkeydown de l'entrée et de vérifier la touche de tabulation. Si vous appuyez sur la touche de tabulation, désactivez le bouton et définissez un délai avec une longueur d'intervalle de 0 pour réactiver le bouton.