如何在键盘上输入“ Enter”键 <input> 元素转移到下一个焦点 <input> 页面上的元素。 （JavaScript的）
[英]How do I make “Enter” keypress in an <input> Element shift focus to the next <input> element on the page. (JavaScript)
问题描述
如何使<input>元素中的Enter键转移焦点到页面上的下一个<input>元素？
我有一个for循环，该循环创建带有<input>元素的<li>元素。 我需要做的是，当用户在键盘上按下Enter键时，网站将专注于下一个输入字段，以便用户可以输入下一个玩家名称，而不必在使用鼠标和键盘之间进行切换。
我以为使用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();
}
} );
}
我尝试在for循环和字符串连接中使用“ i”来选择下一个元素的ID，但是“ i”变量也不起作用，因为在代码运行时“ i”等于最高编号在整个for循环运行之后。
4 个解决方案
解决方案1
0 2017-04-07 22:50:16
$('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。 如果按住某个键，它将以无法处理的速度触发大量按键事件；）
解决方案2
0 已采纳 2017-04-07 22:51:45
问题：
实际代码的问题在于，在事件处理程序callback函数中， i始终等于numberOfPlayers+1 ，因此，您尝试着重于null元素，可以阅读有关JavaScript闭包的更多信息，以了解为什么i始终等于numberOfPlayers+1 。
解：
首先，您需要在输入上使用onkeypress事件，然后测试按下的键是否为Enter键 ，如果按下该键 ，则获取当前input的id ，从中提取i值，并使用下一个id专注于下一个input元素。
这应该是您的代码：
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>
解决方案3
0 2017-04-07 22:52:06
如果您想坚持使用香草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);
}
解决方案4
0 2017-04-07 23:19:59
这是我的解决方案。
不要忘记，需要将创建的<li>元素追加到<body>类的后面。 实际上，我已经添加了一个<ul>元素并将其附加到<body> ，然后将<li>元素附加到了<ul>元素。
如果使用nextSibling ，则无需将元素保留在nameInputArray 。 我没有删除它来显示在循环中使用它之前应该如何初始化它。 另外， nextSibling在我的解决方案中也可以使用，因为我将所有<li>放在一个<ul> ，我认为这是正确的做法 。
除此之外，我只是在这里和那里纠正了一些问题。 如果您对此代码还有其他疑问，请告诉我。
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元素，然后获取该元素内部的输入框。
按下“Enter”按钮时如何将焦点设置在下一个输入上？ （javascript）
[英]How to set focus on next input when the button "Enter" is pressed? (javascript)
焦点对准时如何使用javascript设置（this）输入元素的样式
[英]How to style (this) input element with javascript when in focus
我如何获取此脚本以将元素集中在keydown / keypress上？
[英]How do i get this script to focus an element on keydown/keypress?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.