Vorheriges Element des gleichen Typs unabhängig von Eltern finden

Question

Ich möchte in der Lage sein, das vorherige Element eines bestimmten Typs zu finden, ob es innerhalb des gleichen Elternteils enthalten ist oder nicht.

In dieser Situation möchte ich das vorherige Elementfinden und es konzentrieren.

Momentan kann ich das vorherige Geschwister in demselben Eltern auswählen, aber möchte in der Lage sein, das auf nur Elemente zu filtern und das vorherige Elternteil ebenso zuzulassen.

Die angenommene Antwort ist nur vanilla javascript.

document.addEventListener('keydown', function(e) { 
 
    // if backspace is pressed and the input is empty 
 
    if (e.keyCode === 8 && e.target.value.length === 0) { 
 
    // This should give focus to the previous input element 
 
    e.target.previousSibling.previousSibling.focus(); 
 
    } 
 
}, false);

<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div>

Answer 1

verwendet, könnte Sie nur querySelectorAll verwenden, um alle passenden Elemente zu erhalten und dann die Schleife die, die Sie in zu finden sind, Konzentriere dich dann auf das vorherige. Das Ergebnis von querySelectorAll befindet sich in "Dokumentenreihenfolge".

document.addEventListener('keydown', function(e) { 
 
    if (e.keyCode === 8 && e.target.value.length === 0) { 
 
    // This should give focus to the previous input element 
 
    var inputs = document.querySelectorAll('input[type="text"]'); 
 

 
    for(var i = 1; i < inputs.length; i++){ 
 
     if(inputs[i] == e.target){ 
 
      inputs[i-1].focus(); 
 
      break; 
 
     } 
 
    } 
 
    } 
 
}, false);

<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div>

Answer 2

Verwendung

e.target.previousElementSibling.previousElementSibling.focus() 

statt previousSibling

Answer 3

Statt auf dem Dokument auftreten, zu allen Veranstaltungen zu hören, auf der Suche nach Ereignissen auf bestimmte Elemente ausgelöst wird, können Sie die folgende Methode verwenden.

Auswählen und Zwischenspeichern des Bereichselements, das die Elemente enthält, die Sie durchlaufen möchten.

Wählen Sie alle zu durchsuchenden Elemente aus dem zuvor in einer Liste ausgewählten Bereich aus, und speichern Sie sie zwischen.

Schleife durch alle Elemente in der Liste, in jeder Iteration der Schleife:

1. eine sofort Expression Ausgeführt Funktion verwenden (IIFE) einen neuen lexikalischen Rahmen zu schaffen, in dem Sie den Index mit zugehörigen speichern das aktuelle Element in diesem Bereich.
2. Weisen Sie dem Ereignis 'keydown' für dieses Element einen Ereignis-Listener zu, in dem Sie prüfen, ob die Rücktaste gedrückt wurde und das Feld leer ist. Wenn diese Prüfungen bestanden werden:
   • den Fokus auf das vorherige Element in der Liste der zuvor ausgewählten Elemente setzen;
   • oder, wenn das aktuelle Element das erste Element in der Liste ist, den Fokus auf das letzte Element in der Liste setzen.

Mit dieser Methode:

• Sie nur die DOM Abfrage zweimal (in begrenztem Umfang),
• Sie sind nicht auf jeden keydown Ereignis wartet, feuerte in die auf jedem Element gesamtes Dokument, und
• können Sie endlos durch Schleifen von Anfang bis Ende Zyklus.

var scope = document.querySelector('.scope'); 
 
var inputs = scope.querySelectorAll('input[type="text"]'); 
 
for (var i in Object.keys(inputs)) (function(index){ 
 
    inputs[i].addEventListener('keydown', function(e){ 
 
     if (e.which === 8 && this.value.length === 0) { 
 
      var next = index - 1; 
 
      if (next < 0) next = inputs.length - 1; 
 
      inputs[next].focus(); 
 
     } 
 
    }, false); 
 
})(i);

<div class="scope"> 
 
    <div><input type="text"><input type="text"></div> 
 
    <div><input type="text"><input type="text"></div> 
 
    <div><input type="text"><input type="text"></div> 
 
</div>