it-swarm.com.de

Safari ignoriert tabindex

Ich habe 2 Schaltflächen neben einem Textfeld und ein weiteres Textfeld nach den 2 Schaltflächen. Der Tabindex für das erste Textfeld ist 1000, der erste Button ist 1001 und der zweite Button ist 1002. Das zweite Textfeld hat einen Tabindex von 1003.

Wenn ich die Tabulatortaste drücke, funktioniert der Tabindex in allen Browsern einwandfrei, mit Ausnahme von Safari, wo er sofort vom ersten Textfeld zum zweiten Textfeld verschoben wird, obwohl der Tabindex ordnungsgemäß festgelegt wurde. Irgendwelche Ideen, wie man dieses Problem verhindern kann?

45
Dhana

Standardmäßig ist der Tab-Zugriff in Safari (!) Deaktiviert. Um es zu aktivieren, aktivieren Sie "Voreinstellungen> Erweitert> Drücken Sie die Tabulatortaste, um jedes Element auf einer Seite hervorzuheben".

124
graphicdivine

Safari und einen Mac zugänglich machen:

Testen auf einem Mac: Systemeinstellungen -> Tastatur -> Tastenkombinationen (Registerkarte) -> Vollständiger Tastaturzugriff -> Alle Steuerelemente

Damit Tabs auf Safari funktioniert: Einstellungen -> Erweitert -> Drücken Sie die Tabulatortaste, um die einzelnen Elemente auf einer Seite zu markieren (aktivieren Sie diese Option).

8
user3862605

Wenn Sie Ihre eigene Webseite schreiben, würde ich etwas mit jquery/javascript schreiben. Das ist was ich bei mir verwendet habe.

Der Nachteil ist, dass Sie das Standardverhalten der Tabulatortasten auf der Seite verhindern, was in einigen Situationen ein größeres Problem für den Zugriff sein kann. Aber ich bezweifle es.

var Tab = {};
Tab.i = 1,
Tab.items = 0;

function fixTabulation () {
    /* This can be used to auto-assign tab-indexes, or
    #  commented out if it manual tab-indexes have
    #  already been assigned.
    */
    $('input, select, textarea').each(function(){
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* We need to listen for any forward or backward Tab
    #  key event tell the page where to focus next.
    */
    $(document).on({
        'keydown' : function(e) {
            if (navigator.appVersion.match("Safari")) {
                if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
                if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
            }
        }
    });

    /* We need to update Tab.i if someone clicks into
    #  a different part of the form.  This allows us
    #  to keep tabbing from the newly clicked input
    */
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
        Tab.i = $(this).attr('tabindex');
        console.log(Tab.i);
    });
}

$(document).ready(function() {
    fixTabulation();
});

Dies ist keine perfekte Lösung, aber es ist besser, als allen Benutzern mitzuteilen, dass sie ihre Safari-Einstellungen in den Systemeinstellungen ändern müssen.

5
John Hadwin

Ich habe folgendes mit Safari 5.1.5 versucht. Ich weiß nicht, wie es mit älteren Versionen funktioniert:

Wenn "Hervorheben jedes Elements auf einer Seite" (siehe Antwort nach Grafikdivine) deaktiviert ist, können Sie diese Funktion verwenden, indem Sie Option (Alt) + Tab drücken. 

Wenn Sie dies nicht tun (und die Option deaktiviert ist), wird Safari standardmäßig durch alle Formularfelder (wie Eingabe, Textbereich, Auswahl ...) geführt. Für diese Felder wird auch ein Tabindex akzeptiert/berücksichtigt. Zuerst werden alle Formularelemente mit einem Tabindex (in der Reihenfolge der angegebenen Indizes) und dann die restlichen Formularelemente in der Reihenfolge ihrer Definition in HTML durchgestrichen.

Wenn Sie also für zwei Eingabeelemente einen tabindex = "1" (oder 1001) und "3" (oder 1003) definieren, fokussiert Safari zuerst diese Felder und dann die anderen.

5
Zaphoid

Die Lösung für iOS hält die Wahltaste + die Tabulatortaste.

0
lesyk

Das gleiche Problem begegnete und musste die Tabulatornavigation programmatisch implementieren. Glücklicherweise fand dieses jquery tabellierbare Plugin https://github.com/marklagendijk/jQuery.tabbable und setzte es für einen guten Gebrauch ein, hier ist 

require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
  $(document).keydown((event) => {
    if (event.keyCode === 9) {
      window.$.tabNext();
      event.preventDefault();
    }
  });
});
0
Dan Ochiana