Wie kann ich sicherstellen, dass sich die Tab-Reihenfolge für HTML-Elemente immer gleich verhält, unabhängig davon, ob die Seite aktualisiert oder zur Seite navigiert wurde?

Das Projekt, an dem ich gerade arbeite, verwendet AngularJS und verwendet das UI-Router-Plugin, um alle Status-/Seitenänderungen zu verwalten.Wie kann ich sicherstellen, dass sich die Tab-Reihenfolge für HTML-Elemente immer gleich verhält, unabhängig davon, ob die Seite aktualisiert oder zur Seite navigiert wurde?

Wenn ich auf bestimmte Seite durch Klicken auf eine Schaltfläche auf der Startseite der App gehe, beginnt die Tab-Reihenfolge dieser Seite in der Fußzeile. Wenn ich jedoch dieselbe Seite aktualisiere, beginnt die Tab-Reihenfolge oben auf der Seite korrekt. Ich habe bemerkt, dass, wenn ich über die Schaltfläche auf der Startseite auf die Seite gehe und auf den oberen Rand der Seite klicke, bevor ich mit dem Tab anfange, verhält sich die Tab-Reihenfolge korrekt.

Ich habe versucht, tabIndex = "0" zu Links in der primären Navigationsleiste hinzuzufügen, aber das machte keinen Unterschied. Wie gesagt, die Tab-Reihenfolge der Seite funktioniert einwandfrei, wenn ich die Seite aktualisiere. Es ist nur versaut, wenn ich von einem anderen Teil der Seite zur Seite navigiere.

Gibt es eine Möglichkeit sicherzustellen, dass sich die Tab-Reihenfolge genau gleich verhält, egal ob ich die Seite aktualisiere oder ob ich von einer anderen Seite der Site zur Seite navigiere?

Quelle

2016-06-28 user2407334

Haben Sie eine Beispiel-URL? Gibt es eine Chance, dass der Button auf der Startseite der App ein Link zu einem Anker ist (vielleicht zu # footer oder ähnlichem)? In beiden Fällen wird 'tabindex' nicht das tun, was Sie meiner Meinung nach erreichen wollen; es macht ein Element einfach fokussierbar. – aardrian

Mehr Kontext ist erforderlich. Bitte geben Sie den Beispielcode ein. –

Bei der Statusänderung oder wenn der Controller initialisiert wird und nachdem das DOM gerendert wurde, setzen Sie den Fokus auf das erste Steuerelement, das Ihren Kriterien entspricht.

Containing Ausblick:

<body ng-app="myApp"> 
    <div id="tabContent" ui-view></div> 
    </body>

Javascript:

var rootElementName='tabContent'; 
$timeout(function() { 
       var formElements = $('#' + rootElementId) 
            .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]'); 
       if(formElements && formElements.length > 0) { 
        formElements[0].focus(); 
        return true; 
        } else { 
        return false; 
        } 
      }, 0);

* Sie dies in einem Dienst oder Richtlinie tun. ODER Sie können sie mit onEnter oder dem $ viewContentLoaded-Ereignis verknüpfen.

Ich habe die ID eingefügt, sodass Sie Steuerelemente auf einen bestimmten Teil der Seite ausrichten können. In diesem Beispiel wird das erste Auswahl-, Eingabe- oder Textbereichsteuerelement fokussiert, das nicht deaktiviert ist.

Quelle

2016-06-28 18:49:37

Vielen Dank! – user2407334

Wie kann ich sicherstellen, dass sich die Tab-Reihenfolge für HTML-Elemente immer gleich verhält, unabhängig davon, ob die Seite aktualisiert oder zur Seite navigiert wurde?

Antwort

Verwandte Themen