Dynamické vytváření textového pole s událostí Javascript onkeyup, která přebírá parametry

To, co mám, je jediné textové pole. Pokud uživatel dosáhne maximální délky, chci vytvořit nové textové pole a poté na něj změnit fokus, aby mohl pokračovat v psaní.

Abych toho dosáhl, snažím se dynamicky vytvářet textová pole, která mají onkeyup událost s nimi spojená. K tomu používám document.createElement a vytvoření prvku funguje. Problém je v tom, že nemohu správně nastavit parametry (id aktuálního textového pole a id vytvářeného) a jsou to prostě proměnné. Než je projdu, mohu je otestovat a jsou v pořádku, ale v metodě jsou nulové.

Zde je můj kód:

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


Jsem v Javascriptu docela nový, takže pokud je to úplně fubar’d, omlouvám se.
Každá pomoc je oceňována.

Odpověď

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