onKeyDown JS Funktion einen Eingang hinzuzufügen, die die gleiche Funktion ruft

ich auf einem Formular arbeiten und ich versuche, eine onkeydown Funktion zu erstellen, führt die folgenden:onKeyDown JS Funktion einen Eingang hinzuzufügen, die die gleiche Funktion ruft

nur ausgelöst wird, wenn die Tabulatortaste ist gedrückt (habe diese Arbeit ok)
Fügt ein neues Element (input) (habe diese Arbeit ok)
Dann die eingelegte input die gleiche onkeydown Funktion aufruft (hier fest!)

Versuchserhöhung ++ funktioniert aber nicht?

Hier ist, wo ich bin bis zu:

<html> 
<head> 


</head> 

<body> 
    <form> 
     <input type ="text" OnKeydown = "tab(event)" /> 
     <div id ="insert"> 

     </div> 
    </form> 


</body> 


<script> 
    function tab(event) { 
     if (event.keyCode == 9) { 
      var ins = '<input type ="text" OnKeydown = "tab(event)"/>'; 
      document.getElementById("insert").innerHTML=ins; 
      ins++; 
     } 
    }; 
</script> 

</html>

Quelle

2016-07-13 user3464091

nehmen kann nicht Verwenden Sie Ereignis-HTML-Attribute. Verwenden Sie Ereignislistener in JS. Verwenden Sie die Ereignisdelegierung. Ziehen Sie jQuery in Betracht, wenn etwas von dem, was ich gerade eingegeben habe, ungewohnt klingt. – evolutionxbox

Beispiel bitte? – user3464091

'ins ++' ist ungültig, da Sie einem HTML-Objekt eine Zahl hinzufügen können. --- Als Beispiele empfehle ich die Verwendung von Google mit den von mir aufgeführten Begriffen. --- Lesen ist dein bester Freund hier. – evolutionxbox

Die Punkte von Interesse sind:

befestigen einen Event-Handler mit addEventListener
Code starten auf DOMContentLoaded
Verwendung input autofocus attribute
verwenden Sie appendChild zu legen Sie eine neu erstellte Element DOM

function tab(event) { 
 
    if (event.keyCode == 9) { 
 
    // remove the event listener for the old element 
 
    event.target.removeEventListener('keydown', tab); 
 
    
 
    
 
    var ins = document.createElement("input"); 
 
    ins.type = "text"; 
 
    ins.autofocus = true; 
 
    document.getElementById("insert").appendChild(ins); 
 
    ins.addEventListener('keydown', tab, false); 
 
    } 
 
} 
 

 
window.addEventListener('DOMContentLoaded', function(e) { 
 
    document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false); 
 
}, false);

<form> 
 
    <input type ="text"/> 
 
    <div id ="insert"> 
 
    </div> 
 
</form>

Um eine Reihe von Eingaben wie im Kommentar, den Sie eine neue Zeile in der Tabelle zu erstellen, und fügen Sie haben beschrieben hinzuzufügen, erstellen 3 Zellen und für jedes einzelne fügen Sie das entsprechende Eingabefeld hinzu und setzen Sie den Tab Event Event Handler zB für die letzte Zelle.

Um eine neue Zeile in einer Tabelle zu erstellen, die Sie insertRow, während um neue Zellen zu addieren beziehen können Sie einen Blick auf insertCell

function tab(event) { 
 
    if (event.keyCode == 9) { 
 
    event.target.removeEventListener('keydown', tab); 
 

 
    var table = document.getElementById('tbl').getElementsByTagName('tbody')[0]; 
 

 
    var newRow = table.insertRow(table.rows.length); 
 

 
    var newCell = newRow.insertCell(-1); 
 
    var ins = document.createElement("input"); 
 
    ins.type = "number"; 
 
    ins.autofocus = true; 
 
    newCell.appendChild(ins); 
 

 
    newCell = newRow.insertCell(-1); 
 
    ins = document.createElement("input"); 
 
    ins.type = "text"; 
 
    ins.autofocus = true; 
 
    newCell.appendChild(ins); 
 

 
    newCell = newRow.insertCell(-1); 
 
    ins = document.createElement("input"); 
 
    ins.type = "number"; 
 
    ins.autofocus = true; 
 
    newCell.appendChild(ins); 
 

 
    ins.addEventListener('keydown', tab, false); 
 
    setTimeout(function() { 
 
     ins.focus(); 
 
    }, 10); 
 
    } 
 
} 
 

 
window.addEventListener('DOMContentLoaded', function (e) { 
 
    document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false); 
 
}, false);

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

 
    <div id="insert"> 
 
     <table id="tbl"> 
 
      <thead> 
 
      <tr> 
 
       <th>Number</th> 
 
       <th>Text</th> 
 
       <th>Number</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</form>

Quelle

2016-07-13 16:50:56 gaetanoM

Danke @gaetanoM, das funktioniert super! Das einzige Problem ist, dass Sie auf eine vorherige "Eingabe" klicken. Die Funktion wird weiterhin aufgerufen, wenn die Registerkarte gedrückt wird.Auch wenn ich eine Zeile mit "Eingängen" einfügen wollte, wo würde ich den "html" einfügen? – user3464091

Perfekt! @gaetanoM Ich werde verschiedener Zusatz 'inputs' zu der Reihe, so dass der html so etwas wie' aussehen wird ' – user3464091

@ user3464091 Vielen Dank. – gaetanoM

<html> 
<head> 


</head> 

<body> 
    <form> 
    <input type ="text" OnKeydown = "tab(event)" /> 
    <div id ="insert"> 

    </div> 
    </form> 


</body> 


<script> 
function tab(event) { 
if (event.keyCode == 9) 
     { 
     var input = document.createElement("input"); 
     input.type = "text"; 
     input.setAttribute("OnKeydown","tab(event)"); 
     // var ins = '<input type ="text" OnKeydown = "tab(event)"/>'; 
     var div= document.getElementById("insert") 
     div.appendChild(input); 
     } 

}; 


</script> 

</html>

Quelle

2016-07-13 17:11:25 Ray

Danke. Nette Lösung aber gleiches Problem ... Klick zurück und die Funktion feuert weiter! – user3464091

onKeyDown JS Funktion einen Eingang hinzuzufügen, die die gleiche Funktion ruft

Antwort

Verwandte Themen