How do I make "Enter" keypress in an Element shift focus to the next element on the page. (JavaScript)

Question

How do I make make an Enter keypress in an <input> element shift focus to the next <input> element on the page?

I have a for loop that creates <li> elements with <input> elements inside. I need to make so that when the user hits enter on their keyboard, the website will focus on the next input field so that the user can enter the next player name without having to toggle between using their mouse and their keyboard.

I thought using the nextSibling property was the solution but it wont work because the <input> elements technically dont have any siblings because each of them is inside/are children of diferent <li> elements.

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

I tried using the "i" in the for loop and string concatenation to select the ID of the next element but the "i" variable isn't working either because by the time that code runs that "i" is equal to the highest number that it can be after the whole for loop has ran.

Answer 1

Problem:

The problem with your actual code is that i is always equal to numberOfPlayers+1 in the event handler callback function, so you were trying to focus on a null element, you can read more about JavaScript closures to see why i was always equal to numberOfPlayers+1.

Solution:

First you need to use the onkeypress event on your input, then test if the pressed key is the Enter, if it's pressed get the id of the current input, extract i value from it and focus on the next input element using the next id.

This is how should be your code:

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

This is a working snippet:

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>

Answer 2

If you want to stick with vanilla JS, use this:

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 3

This is my solution.

Do not forget that the created <li> element needs to be appended to something like <body>. I have actually added a <ul> element and appended it to the <body> and then appended the <li> elements to the <ul> element.

If you use nextSibling, you do not need to keep elements in nameInputArray. I have not removed it to show how it should be initialized before you can use it in your loop. Also, nextSibling works in my solution since I have put all the <li>s under one <ul> which I think is the correct thing to do anyway.

Other than that, I just corrected a few things here and there. Let me know if you have more questions about this code.

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

UPDATE: Getting each input box from parent <li> elements:

After comment from the OP, I see that they want a structure like this:

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

In this structure, each input box is the first child node of its parent <li> element. Therefore, we can still use nextSibling (as the OP intended to use) in this way:

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

This line first finds the parent <li> element, applies nextSibling to get the next li element and then gets the input box inside that element.

Answer 4

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

https://jsfiddle.net/jat1merL/

are you looking for this?

by the way, use keyup instead of keypress. if a key is hold it fires mass of keypress events in a speed you can't handle ;)