按下“Enter”按钮时如何将焦点设置在下一个输入上？ (javascript)

Question

我需要一些建议。

我创建了一个函数，当按下空格键时，它将创建一个新的输入字段。 我想知道的是如何在按下空格键时创建的输入字段上设置焦点。

提前致谢。

这是我的代码：（包括 HTML）

<div id="paper">
  <div id="content">
  <input type="text" class="input1">
  </div>
  </div>

Javascript：

'use strict';

const input1 = document.querySelector('.input1');
const add = input1.addEventListener('keydown', function(e){
        if((e.keyCode === 13)){
        return mover();
        }
      });

 const mover = function(){
  const mega = document.createElement('input');
  const content = document.getElementById('content');
  content.appendChild(mega);
  mega.style.border = "0px solid";
  mega.style.marginTop = "75px";
  mega.style.width = "600px";
}

Answer 1

这样的东西，可以解决问题。

const container = document.getElementById("inputs-container");
let inputs = document.getElementsByTagName("input");

// Add input on press Enter
document.onkeyup = (evt) => {
  if (evt.keyCode == 32) {
    let input = document.createElement("input");
    input.type = "text";
    input.placeholder = "Input...";
    input.onkeyup = inputOnEnter;
    container.appendChild(input);
    inputs = document.getElementsByTagName("input");
  }
};

// Focus next input on Space
const inputOnEnter = (evt) => {
  if (evt.keyCode == 13) {      
    let index = Object.keys(inputs).filter(a => inputs[a] === evt.target);
    let nextIndex = parseInt(index) + 1;

    if (inputs[nextIndex]) inputs[nextIndex].focus();
  }
};

for (let i = 0; i < inputs.length;i++) {
  inputs[i].onkeyup = inputOnEnter;
}

<div id="inputs-container">
  <input type="text" placeholder="Input..." />
</div>