Création dynamique d'une zone de texte avec un événement javascript onkeyup prenant des paramètres

Question

Ce que j'ai est une seule zone de texte. Si l'utilisateur en atteint la longueur maximale, je veux créer une nouvelle zone de texte, puis changer de focus pour continuer à taper. Pour ce faire, j'essaie de créer dynamiquement des zones de texte auxquelles un événement onkeyup est lié. Pour ce faire, j'utilise document.createElement et la création de l'élément fonctionne. Le problème est que je ne peux pas obtenir les paramètres (l'id de la zone de texte en cours et l'id de celui à créer) pour passer correctement et ils sont simplement des variables. Avant de les passer je peux les tester et ils vont bien, mais dans la méthode ils sont nuls.

Voici mon code:

<script type="text/javascript"> 
    var i = 2; 
    function CreateTextbox() { 
    var box = document.getElementById(divCreateTextbox); 
     var curr = 'txt' + i; 
     var next = 'txt' + (i + 1); 

     var inp = document.createElement('input') 
     inp.type = 'text'; 
     inp.name = 'textfield'; 
     inp.maxlength = '10'; 
     inp.id = curr; 
     inp.setAttribute('onkeyup', 'moveOnMax(inp.id, next)'); 
     inp.onkeyup = function() { moveOnMax(inp.id, next); }; 

     box.appendChild(inp); 
     box.innerHTML += "<br />"; 

     i++; 

     return next; 
    } 

    function moveOnMax(field, nextFieldID) { 
     if (field.value.length >= field.maxLength) { 
      if (document.getElementById(nextFieldID) == null) { 
       var id = CreateTextbox(); 

       if (document.getElementById(id) != null) { 
        document.getElementById(id).focus(); 
       } 
       else 
        alert("problem..."); 
      } 
     } 
    } 
</script> 

    <div id="divCreateTextbox"> 

Je suis assez nouveau pour le Javascript, donc si cela est complètement fubar'd, je présente mes excuses.
Toute aide est appréciée.

Answer 1

<script type="text/javascript"> 
    getId = function(){ 
     var id = 1; 
     return function(){ 
     id++; 
     } 
    }(); 

    function CreateTextbox() { 
     var box = document.getElementById("divCreateTextbox"); 
     var curr = 'txt' + getId(); 
     var inp = document.createElement('input'); 

     inp.type = 'text'; 
     inp.name = 'textfield'; 
     inp.setAttribute("maxlength",'10'); 
     inp.setAttribute("id",curr); 

     box.appendChild(inp); 

     inp.setAttribute('onkeyup','moveOnMax(this)'); 
     box.appendChild(document.createElement("br")); 
     inp.focus(); 
    } 

    function moveOnMax(s){ 
     if(s.value.length >= parseInt(s.getAttribute("maxlength"))-1){ 
     s.blur(); 
     CreateTextbox(); 
     } 
    } 

</script> 


    <div id="divCreateTextbox"></div> 

    <script> 
    window.onload = function(){ 
     CreateTextbox() 
    } 
    </script> 
</html> 

Answer 2

Le problème que vous avez est lié à la portée de inp. Lorsque vous utilisez le mot clé var, vous l'avez défini sur ce bloc.

Essayez ce code:

inp.onkeyup = function() { 
    var local_inp_id = inp.id; 
    var local_next = next; 
    return function(){ 
    moveOnMax(inp_id, next); 
    } 
}();