Смещение фокуса на время - Только JavaScript - Нет jQuery

Question

Я хотел бы иметь возможность перемещаться по некоторым фокусируемым элементам на моей веб-странице с помощью клавиш со стрелками, используя только JavaScript.

Я нашел отличное решение здесь .Единственное, он использует jQuery, который я не хочу использовать.Автор этого ответа сказал мне, что такого же эффекта можно достичь только с помощью JavaScript.Я просто не знаю, как и даже что искать.Я все еще новичок, поэтому прошу прощения, если это очевидный вопрос.

Это версия JQuery того, чего я хочу достичь:

<input class='move' /><input class='move' /><input class='move' />

$(document).keydown(
    function(e)
    {    
        if (e.keyCode == 39) {      
            $(".move:focus").next().focus();
        }
        if (e.keyCode == 37) {      
            $(".move:focus").prev().focus();
        }
    }
);

Answer 1

Вот еще одно решение, использующее пользовательский класс для обработки ходов.

class MoveHandler {
  constructor() {
    //Get the first element of the list and set it as the current
    //TODO: if the DOM doesn't get updated it is also possible to store the .move HTML elements within this instance
    this.current = document.getElementsByClassName("move")[0];
    
    //initially set the first as focus
    this.current.focus();
    
    //event listener on the window for arrow keys
    window.addEventListener("keydown", this.move.bind(this));
  }

  move(e) {
  
    //update the current according to the arrow keys.
    //Check to see if the current has a previous or next otherwise do nothing.
  
    switch (e.keyCode) {
      case 39:
        if (this.current.nextElementSibling === null) return;
        this.current = this.current.nextElementSibling;
        break;
      case 37:
        if (this.current.previousElementSibling === null) return;
        this.current = this.current.previousElementSibling;
        break;
      default:
        console.log("Wrong key");
        return;
    }
    this.current.focus();
  }
}

new MoveHandler();

<input class='move' /><input class='move' /><input class='move' />

Answer 2

Вам просто нужно перевести каждую часть в чистый JavaScript:

document.addEventListener("keydown", function(e) {    
    if (e.keyCode == 39) {      
        document.querySelector(".move:focus").nextSibling.focus();
    }
    if (e.keyCode == 37) {      
        document.querySelector(".move:focus").previousSibling.focus();
    }
});

, а затем добавить несколько уловок на случай, если вы пытаетесь получить доступ к элементам, которые не существуют:

if (e.keyCode == 39) {      
    if (document.querySelector(".move:focus").nextSibling) {
        document.querySelector(".move:focus").nextSibling.focus();
    }
}
if (e.keyCode == 37) {      
    if (document.querySelector(".move:focus").previousSibling) {
        document.querySelector(".move:focus").previousSibling.focus();
    }
    document.querySelector(".move:focus").previousSibling.focus();
}

Answer 3

Вы можете использовать следующие функции:

• querySelectorAll() или getElementsByClassName для выбора элементов.
• addEventListener() для привязки прослушивателя событий.
• previousElementSibling и nextElementSibling для получения элементов previous() и next().

var inputs = document.getElementsByClassName("move");
for (var i = 0; i < inputs.length; i++)
  inputs[i].addEventListener("keyup", function (event) {
    if (event.keyCode == 37) {
      if (this.previousElementSibling) {
        this.previousElementSibling.focus();
      }
    }
    else if (event.keyCode == 39) {
      if (this.nextElementSibling) {
        this.nextElementSibling.focus();
      }
    }
  }, false);

<input class='move' />
<input class='move' />
<input class='move' />

Для получения дополнительной информации о замене, проверьте: Вам может не понадобиться jQuery .?