Question

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

我有一个for循环，用于创建<li>元素，其中包含<input>个元素。我需要这样做，当用户点击键盘输入时，网站将关注下一个输入字段，以便用户可以输入下一个播放器名称，而无需在使用鼠标和键盘之间切换。

我认为使用nextSibling属性是解决方案，但它无法工作，因为<input>元素在技术上没有任何兄弟姐妹因为每个元素都在内部/是不同<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();
    }
  } );
}

我尝试使用＆＃34; i＆＃34;在for循环和字符串连接中选择下一个元素的ID但是＆＃34; i＆＃34;变量不起作用，因为在代码运行的时候＆＃34; i＆＃34;等于整个for循环运行后它可以达到的最高数。

Answer 1

$('input').on('keyup', function(event){
  if(event.keyCode == 13){ // 13 is the keycode for enter button
    $(this).next('input').focus();
  }
});

https://jsfiddle.net/jat1merL/

你正在寻找这个吗？

顺便说一句，使用keyup而不是keypress。如果一个键被保持，它会以你无法处理的速度发出大量的按键事件;）

Answer 2

<强>问题：

您的实际代码存在的问题是i始终等于事件处理程序numberOfPlayers+1函数中的callback，因此您试图关注null元素，您可以阅读有关JavaScript closures的更多信息，了解i始终等于numberOfPlayers+1的原因。

<强>解决方案：

首先，您需要在输入中使用onkeypress事件，然后测试按下的键是否为 Enter ，如果按下该键，则获取当前id的{ {1}}，从中提取input值并使用下一个i关注下一个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();
      }
    }
  });
}

Answer 3

如果你想坚持使用香草JS，请使用：

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

Answer 4

这是我的解决方案。

不要忘记创建的<li>元素需要附加到<body>之类的内容。我实际上添加了<ul>元素并将其附加到<body>，然后将<li>元素附加到<ul>元素。

如果您使用nextSibling，则无需在nameInputArray中保留元素。我没有删除它，以显示它应该如何初始化，然后才能在循环中使用它。此外，nextSibling适用于我的解决方案，因为我已将所有<li>置于一个<ul>下，我认为the correct thing to do anyway。

除此之外，我刚刚在这里和那里纠正了一些事情。如果您对此代码有更多疑问，请与我们联系。

function eventFunc(event) {
  if (event.which === 13) {
    var nextInput = event.target.parentElement.nextSibling.childNodes[0];
    if (nextInput !== null)
      nextInput.focus();
  }
}

var numberOfPlayers = 4;
var nameInputArray = [];

var ulElement = document.createElement('ul');

document.body.append(ulElement);


for (var i = 0; i < numberOfPlayers; i++) {
  var liElement = document.createElement('li');
  ulElement.append(liElement);
  var inputElement = document.createElement('input');

  inputElement.setAttribute('type', 'text');
  inputElement.setAttribute('id', 'name-input-' + i);
  inputElement.setAttribute('class', 'name-input');
  inputElement.setAttribute('placeholder', 'Enter a name for player ' + i);
  inputElement.setAttribute('onkeypress', "eventFunc(event)");
  liElement.appendChild(inputElement);
  nameInputArray[i] = inputElement;
}

更新：从父<li>元素中获取每个输入框：

在OP的评论之后，我发现他们想要一个这样的结构：

<ul>
    <li>input box1</li>
    <li>input box2</li>
    <li>input box3</li>
</ul>

在此结构中，每个输入框是其父<li>元素的第一个子节点。因此，我们仍然可以这样使用nextSibling（作为OP打算使用）：

nextInput = event.target.parentElement.nextSibling.childNodes[0];

此行首先找到父<li>元素，应用nextSibling获取下一个li元素，然后获取该元素内的输入框。

如何制作＆＃34;输入＆＃34; <input />元素中的按键将焦点转移到页面上的下一个<input />元素。（JavaScript的）

4 个答案:

如何制作＆＃34;输入＆＃34; <input />元素中的按键将焦点转移到页面上的下一个<input />元素。 （JavaScript的）

4 个答案:

如何制作＆＃34;输入＆＃34; <input />元素中的按键将焦点转移到页面上的下一个<input />元素。（JavaScript的）