Question

我试图在用户点击加号时动态添加HTML中的输入字段。此外，我的输入字段又由三个字段组成，输入时（maxlength在三个字段中为2,10和3），当到达maxlength时，自动选项卡到下一个字段

现在，在此期间，我使用了HTML输入中包含的moveCursor函数，并在JavaScript中定义。现在，在自动选项卡之后，我需要创建添加输入字段的函数。

为此，我使用了以下JavaScript逻辑，该逻辑在单击加号（不工作）时触发。

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" onkeyup="moveCursor(this,'txt2') class="txt1" maxlength="2" style=" width: 10%; float:left"name="mytext[]" maxlength="10" placeholder="XX"/><input type="text" onkeyup="moveCursor(this,'txt3') maxlength="3" class="txt2" placeholder="XXXXXXXXXX"style="width: 20%; float: left"name="mytext[]"/><input type="text" placeholder="XXX"style="width: 10%"name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

在逻辑中，我输入了HTML代码，以及自动标记它的moveCursor函数，但现在它没有运行，因为它嵌套在JavaScript中。但是，此函数和moveCursor函数都在同一文件中定义。

自动标记字段（工作）的moveCursor函数如下：

function moveCursor(from, to) {
  var length = from.value.length;
  var maxlength = from.getAttribute("maxlength");
  if (length == maxlength) {
    window.setTimeout(function() {
      document.querySelector("." + to).focus();
    }, 0);
  }
}

将JavaScript代码嵌入另一个JavaScript函数中

0 个答案: