fonction onKeyDown JS ajouter une entrée qui appelle la même fonction

Je travaille sur un formulaire et essaie de créer une fonction onkeydown qui effectue les opérations suivantes:fonction onKeyDown JS ajouter une entrée qui appelle la même fonction

Seuls les feux lorsque la touche Tabulation est pressé (obtenu ce travail ok)

un nouvel élément Inserts (input) (obtenu ce travail ok)

Ensuite, l'insertion input appelle la même fonction onkeydown (coincé ici!)

Essayé Incrément ++ mais ne fonctionnait pas?

est ici où je suis jusqu'à:

<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>

Source

2016-07-13 user3464091

Ne pas utiliser les attributs HTML d'événement. Utilisez les écouteurs d'événement dans JS. Utiliser la délégation d'événement Pensez à utiliser jQuery si l'un de ceux que je viens de taper ne vous semble pas familier. – evolutionxbox

Exemple s'il vous plaît? – user3464091

'ins ++' n'est pas valide, car vous pouvez ajouter un nombre à un objet HTML. --- Comme pour les exemples, je recommande d'utiliser google en utilisant les termes que j'ai énumérés. --- La lecture est votre meilleur ami ici. – evolutionxbox

Les points d'intérêt sont:

liez un gestionnaire d'événement avec addEventListener
commencer votre code sur DOMContentLoaded
utilisation input autofocus attribute
utilisez appendChild pour insérer un élément nouvellement créé 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>

Pour ajouter une ligne d'entrées comme décrit dans le commentaire que vous devez créer et ajouter une nouvelle ligne à la table, créer 3 cellules et pour chacun ajouter le champ d'entrée correspondant et définir le gestionnaire d'événements onglet par exemple sur la dernière cellule.

Pour créer une nouvelle ligne dans une table, vous pouvez vous référer à insertRow, tandis que pour ajouter de nouvelles cellules que vous pouvez jeter un oeil à 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>

Source

2016-07-13 16:50:56 gaetanoM

Merci @gaetanoM qui fonctionne très bien! Le seul problème est que vous cliquez sur une entrée précédente, la fonction continue d'être appelée quand on appuie sur la touche Tab.Aussi, si je voulais insérer une rangée de 'inputs', est-ce que je mettrais le' html'? – user3464091

Parfait! @gaetanoM J'ajouterons diverses 'inputs' à la ligne de sorte que le html ressemblera' ' – user3464091

@ utilisateur3464091 Merci beaucoup. – 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>

Source

2016-07-13 17:11:25 Ray

Merci. Belle solution mais le même problème ... cliquez en arrière et la fonction continue à tirer! – user3464091

fonction onKeyDown JS ajouter une entrée qui appelle la même fonction

Répondre

Questions connexes