javascript - 获取 Dom 树中下一个元素的第一个子元素并关注它

Question

编辑 - 问题已更新。

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

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

Uncaught TypeError: Cannot read property 'childNodes' of undefined

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

我在这里缺少什么？

片段

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();
      }
    }
  }
}

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

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();
      }
    }
  });