Focus sur l'élément suivant dans l'index des onglets

J'essaie de déplacer le focus vers l'élément suivant dans la séquence d'onglets en fonction de l'élément actuel qui a le focus. Pour l'instant je n'ai rien trouvé dans mes recherches.

function OnFocusOut()
{
 var currentElement = $get(currentElementId); // ID set by OnFocusIn 
 currentElementId = "";
 currentElement.nextElementByTabIndex.focus();
}

Bien sûr, le nextElementByTabIndex est l'élément clé pour que cela fonctionne. Comment puis-je trouver l'élément suivant dans la séquence de tabulation ? La solution devrait être basée sur JScript et non sur quelque chose comme JQuery.

Solution du problème

Here's something I build for this purpose:

function focusNextElement () {
 //add all elements we want to include in our selection
 var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
 if (document.activeElement && document.activeElement.form) {
 var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
 function (element) {
 //check for visibility while always include the current activeElement 
 return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
 });
 var index = focussable.indexOf(document.activeElement);
 if(index > -1) {
 var nextElement = focussable[index + 1] || focussable[0];
 nextElement.focus();
 }  
 }
}

Caractéristiques:

• ensemble configurable d'éléments focalisables


• pas besoin de jQuery


• fonctionne dans tous les navigateurs modernes


• rapide et léger