Beschränken Sie den Fokus des Tabindex auf einen Abschnitt der Seite

Question

Situation:

Ich habe eine Webseite, die Modalfenster (Lightboxes) öffnet, die Formulare enthalten, in denen der Benutzer Daten eingeben kann. Benutzer navigieren im Allgemeinen mit der Tastatur und wechseln von einem Feld zum nächsten.

Problem:

Wenn ein Modalfenster geöffnet wird, ist nur das Fenster aktiv, der Rest der Seite ist mit der Maus nicht zugänglich, aber Elemente können durch Drücken der Tabulatortaste aus dem Modalfenster erreicht werden.

Frage:

Wie kann ich die Bewegung mit der Tabulatortaste auf die Elemente innerhalb des Formularfensters beschränken?

Das Einzige, was mir einfällt, ist, dass ich mit Javascript tabindex=-1 auf alle Formularelemente (und andere fokussierbare Elemente) setzen kann, wenn das Modalfenster geöffnet wird, und dann die Werte von tabindex wieder auf ihre vorherigen Werte setzen kann, wenn das Modalfenster geschlossen wird. Gibt es einen einfacheren/besseren Weg?

Answer 1

Wie wäre es, die Tab-Taste zu erfassen? Auf dem letzten Element und dann den Fokus auf das erste und umgekehrt mit Shift-Tab

Dies nutze ich in einer Multi-Modless-Dialogumgebung, um den Fokus innerhalb eines Dialogs zu behalten und zwischen Dialogen mit der Maus oder anderen Tasten zu wechseln

inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"

$focusable=dlg.$form.find(inputs).not(no_tab)

$fa_first=$focusable.first()
$fa_last=$focusable.last()

$fa_last.on("keydown", (evt) =>
    if evt.keyCode==9 && ! evt.shiftKey
        $fa_first.focus()
        evt.preventDefault()
        false
)
$fa_first.on("keydown", (evt) =>
    if evt.keyCode==9 && evt.shiftKey
        $fa_last.focus()
        evt.preventDefault()
        false
)

Kleiner Hinweis: Mein "unibind()" (=.off(x).on(x)) Funktion wurde durch jQuery "on()" ersetzt

Answer 2

Falls du den Fokus innerhalb von "parent" im DOM einschränken möchtest

parent.addEventListener('focusout', function(event) {
    event.stopPropagation();

    if (node.contains(event.relatedTarget)) {  // wenn der Fokus in einen anderen 
                                                              Abstieg von parent verschoben wurde
        return;
    }

    parent.focus();  // sonst Fokus auf parent setzen oder zu einem anderen DOM wechseln
})

von allen modernen Browsern unterstützt

Answer 3

Schauen Sie sich das jQuery BlockUI Plugin an. Sie haben ein Beispiel für die Verwendung eines Modalen Dialogfensters mit zwei Schaltflächen und es beschränkt auch das Tabben.

Es kann sein, dass es nicht sofort mit Ihren Modalfenstern funktioniert, aber es ist einen Blick wert, anstatt Ihre eigene Lösung implementieren zu müssen.

Answer 4

Auch wenn es sich um einen alten Beitrag handelt, habe ich nach einer Lösung für dieses Problem gesucht und folgendes gemacht, um es zu lösen.

Unter Verwendung von JQuery deaktivierte ich alle Eingabefelder in verschiedenen Formularen und Divs, sobald das Modal-Fenster geöffnet wird (außer denen im Modalformular selbst).

$('#formId :input').prop('disabled',true);

Wenn das Modalformular geschlossen wird, können Sie die Eingabeelemente wieder aktivieren.

Deaktivierte Felder werden beim "Tabbing" auf Ihrer Seite nicht berücksichtigt.