Question

编辑 - 问题更新。

我有一个函数，当输入达到其最大长度时，它会选择下一个输入准备好更多文本。

这些输入框中的每一个都包含在输入容器中。但是，在尝试以下代码时，我收到此错误

未捕获的TypeError：无法读取属性＆＃39; childNodes＆＃39;未定义的

似乎它没有找到当前元素的父元素，因此无法选择下一个节点。

我在这里缺少什么？

段

＆＃13;

function prepareInputs() {
  var inputs = document.getElementsByTagName('input');

  for (var i = 0; i < inputs.length; i++) {
    inputs[i].onkeyup = function() {
      if (this.value.length == 4) {
        this.nextElementSibling.childNodes[0].focus();
      }
    }
  }
}

＆＃13;

<div class="row">
  <div class="form-group input-group-lg col-xs-3">
    <input type="text" class="form-control" placeholder="PART 1" maxlength="4">
  </div>
  <div class="form-group input-group-lg col-xs-3">
    <input type="text" class="form-control" placeholder="PART 2" maxlength="4">
  </div>
  <div class="form-group input-group-lg col-xs-3">
    <input type="text" class="form-control" placeholder="PART 3" maxlength="4">
  </div>
  <div class="form-group input-group-lg col-xs-3">
    <input type="text" class="form-control" placeholder="PART 4" maxlength="4">
  </div>
</div>

＆＃13;

Answer 1

您收到此错误，因为确实没有input个元素的下一个兄弟。你的代码应该是这样写的。

  //convert nodeList to array
  var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));

  inputs.forEach(function(input,i){
    input.onkeyup = function() {

      if (this.value.length != input.maxLength) {
        return;
      }
      var nextInput = inputs[i + 1];
      if(nextInput){
        nextInput.focus();
      }
    }
  });

获得Dom Tree中下一个元素的第一个孩子并专注于它

编辑 - 问题更新。

1 个答案: