javascript - 如何使 <input> 元素中的 "Enter"按键将焦点转移到页面上的下一个 <input> 元素。 (JavaScript)

Question

如何在 <input> 中按 Enter 键元素将焦点转移到下一个 <input>页面上的元素？

我有一个 for 循环创建 <li>带有 <input> 的元素里面的元素。我需要这样做，以便当用户在键盘上按 Enter 键时，网站将专注于下一个输入字段，以便用户可以输入下一个玩家名称，而无需在使用鼠标和键盘之间切换。

我想使用 nextSibling属性是解决方案，但它不起作用，因为 <input>元素在技术上没有任何 sibling ，因为它们中的每一个都在内部/是不同的 child <li>元素。

这是我的 JavaScript:

for ( var i = 1 ; i <= numberOfPlayers ; i++ ){
  var inputElement = document.createElement('input');
  var liElement = document.createElement('li');
  inputElement.setAttribute( 'type' , 'text' );
  inputElement.setAttribute ( 'id' , 'name-input-' + i );
  inputElement.setAttribute ( 'class' , 'name-input');
  inputElement.setAttribute ( 'placeholder' , 'Enter a name for player ' + i );
  liElement.appendChild(inputElement);
  nameInputArray[i] = inputElement;
  document.getElementById('name-list').appendChild(liElement);
  inputElement.addEventListener( 'keypress' , function(event){
    if ( event.which === 13 ) {
      alert(this);
      document.getElementById( 'name-input-' + (i+1)).focus();
    }
  } );
}

我尝试在 for 循环和字符串连接中使用“i”来选择下一个元素的 ID，但“i”变量也不起作用，因为在代码运行时，“i”等于最高数字它可以在整个 for 循环运行之后。

Answer 1

问题:

您实际代码的问题在于 i总是等于 numberOfPlayers+1在事件处理程序中 callback函数，所以你试图专注于 null元素，您可以阅读有关 JavaScript closures 的更多信息看看为什么i总是等于 numberOfPlayers+1 .

解决方案:

首先你需要使用 onkeypress事件，然后测试按下的键是否为 Enter，如果按下则获取 id当前input , 提取 i从中获得值(value)并关注下一个input使用下一个 id 的元素.

这是您的代码应该如何:

inputElement.addEventListener('keypress', function(event) {
    if (event.which === 13) {
         var i = parseInt(this.id.charAt(this.id.length-1));
         console.log(i);
         if(i<=numberOfPlayers){
            document.getElementById('name-input-' + (i + 1)).focus();
         }
    }
});

这是一个工作片段:

var numberOfPlayers = 5;
var nameInputArray = [];

for (var i = 1; i <= numberOfPlayers; i++) {
  var inputElement = document.createElement('input');
  var liElement = document.createElement('li');
  inputElement.setAttribute('type', 'text');
  inputElement.setAttribute('id', 'name-input-' + i);
  inputElement.setAttribute('class', 'name-input');
  inputElement.setAttribute('placeholder', 'Enter a name for player ' + i);
  liElement.appendChild(inputElement);
  nameInputArray[i] = inputElement;
  document.getElementById('name-list').appendChild(liElement);

  inputElement.addEventListener('keypress', function(event) {
    if (event.which === 13) {
      var i = parseInt(this.id.charAt(this.id.length - 1));
      console.log(i);
      if(i<numberOfPlayers){
         document.getElementById('name-input-' + (i + 1)).focus();
      }
    }
  });
}

<ul id="name-list"></ul>