Behalten Sie den Fokus bei Eingaben des Formulars bei der Verwendung von Tabs, statt in das zweite Formular zu wechseln

Question

Ich möchte den Fokus auf ein einzelnes Formular beschränken, wenn Tab gedrückt wird.
Damit meine ich Fokus auf Form 1 Tab-Index 1, 2 und 3, und dann zurück zu 1 innerhalb der gleichen Form, dann 2, etc., nie die Eingänge 2 bilden. Ich möchte auch nicht die Tab-Indizes ändern.

<form style="background-color:red"> 
    <input tabindex="01"/> 
    <input tabindex="02"/> 
    <input tabindex="03"/> 
</form> 

<form style="background-color:blue"> 
    <input tabindex="01"/> 
    <input tabindex="02"/> 
    <input tabindex="03"/> 
</form> 

Answer 1

Das ist nicht gut Praxis ist, so tun es nicht, es sei denn wirklich gut aus ...

---

zu tun ist, aber es gibt keine in HTML Art und Weise gebaut Um dies zu tun, müssen wir einige JavaScript zusammen mit einer benutzerdefinierten data attribute verwenden.

Ich denke, es ist am einfachsten, ein Datenattribut zu dem Elternteil zu verwenden (die <form>), so dass die Art, wie wir es nicht einzeln zu jedem Eingang hinzufügen. Ich nannte meine data-tabgroup.

Dann müssen wir einige JS:

// Select the tab groups based on the data attribute we added 
 
var tabgroups = document.querySelectorAll("[data-tabgroup]"); 
 

 
// Loop through each to attach the listeners we need 
 
for (var i = 0; i < tabgroups.length; i++) { 
 
    var inputs = tabgroups[i].querySelectorAll("[tabindex]"); 
 

 
    // Loop through all of the elements we want the tab to be changed for 
 
    for (var j = 0; j < inputs.length; j++) { 
 

 
    // Listen for the tab pressed on these elements 
 
    inputs[j].addEventListener("keydown", function(myIndex, inputs, e) { 
 
     if (e.key === "Tab") { 
 
     // Prevent the default tab behavior 
 
     e.preventDefault(); 
 

 
     // Focus the next one in the group 
 
     if (inputs[myIndex + 1]) { 
 
      inputs[myIndex + 1].focus(); 
 
     } else { // Or focus the first one again 
 
      inputs[0].focus(); 
 
     } 
 
     } 
 
    }.bind(null, j, inputs)) // Make a copy of the variables to use in the addEventListener 
 
    } 
 
}

<form style="background-color: red" data-tabgroup> 
 
    <input tabindex="01" /> 
 
    <input tabindex="02" /> 
 
    <input tabindex="03" /> 
 
</form> 
 

 
<form style="background-color: blue" data-tabgroup> 
 
    <input tabindex="01" /> 
 
    <input tabindex="02" /> 
 
    <input tabindex="03" /> 
 
</form>

Und das ist es! Hier ist die demo.

---

Einige Anmerkungen:

• Die aktuelle Implementierung ignoriert den Wert der tabindex innerhalb der Gruppe (es wählt einfach die nächste in der HTML). Um dies zu berücksichtigen, müssen Sie die Elemente nur in der Reihenfolge ihrer Tabindexes in das Array einfügen oder sie nach den Tabindexes sortieren, nachdem Sie sie dem Array hinzugefügt haben.
• Die aktuelle Implementierung erfordert, dass eine tabindex auf Kinder angewendet werden soll, die Sie beeinflussen möchten. Wenn Sie möchten, dass sie standardmäßig auf alle Eingaben angewendet wird, ändern Sie einfach den Wert querySelectorAll für inputs in input. Wenn Sie etwas Komplexeres wollen, müssen Sie es nach Bedarf ändern.