Question

我拥有的是单个文本框。如果用户达到它的最大长度，我想创建一个新的文本框，然后将焦点更改为它，以便他们可以继续键入。

为了实现这一点，我试图动态创建与其绑定的onkeyup事件的文本框。为此，我使用document.createElement并创建元素。问题是我无法正确传递参数（当前文本框的id和要创建的id的id），它们只是变量。在我传递它们之前，我可以测试它们并且它们很好，但是在方法中它们是空的。

这是我的代码：

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

我对Javascript很新，所以如果这完全是fubar'd，我道歉任何帮助表示赞赏。

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

您遇到的问题与inp的范围有关。当您使用var关键字时，您将其范围限定为该块。

试试这段代码：

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

使用带有参数的javascript onkeyup事件动态创建文本框

2 个答案: