Shift focus onkeydown - JavaScript Only - 否 jQuery

Question

我希望仅使用 JavaScript 即可使用箭头键浏览我网页上的一些可聚焦元素。

我找到了一个很好的解决方案 here。唯一的问题是，它使用了我不想使用的 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

您可以使用以下功能：

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' />

有关更多替换内容，请查看：You Might Not Need jQuery。

Answer 2

这是另一个使用自定义 class 来处理移动的解决方案。

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 3

你只需要将每个部分翻译成纯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();
}

Shift focus onkeydown - JavaScript Only - 否 jQuery

Shift focus onkeydown - JavaScript Only - No jQuery

html

javascript

css

jquery

focus