What I have is a single textbox. If the user hits the maxlength of it, I want to create a new textbox and then change focus to it so they can continue typing.

To acplish this, I am trying to dynamically create textboxes that have an onkeyup event tied to them. To do this I am using document.createElement and the creation of the element works. The problem is that I can't get the parameters (the id of the current textbox and the id of the one to be created) to pass correctly and they are simply variables. Before I pass them I can test them and they are fine, but in the method they are null.

Here is my 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">

I am pretty new to Javascript, so if this is pletely fubar'd, I apologize.
Any help is appreciated.

What I have is a single textbox. If the user hits the maxlength of it, I want to create a new textbox and then change focus to it so they can continue typing.

To acplish this, I am trying to dynamically create textboxes that have an onkeyup event tied to them. To do this I am using document.createElement and the creation of the element works. The problem is that I can't get the parameters (the id of the current textbox and the id of the one to be created) to pass correctly and they are simply variables. Before I pass them I can test them and they are fine, but in the method they are null.

Here is my 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">

I am pretty new to Javascript, so if this is pletely fubar'd, I apologize.
Any help is appreciated.

• javascript
• dom-events

2 Answers 2

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

The problem you have is related to the scope of inp. When you use the var keyword you scoped it to that block.

Try this code:

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