将焦点转移到keydown - 仅限 JavaScript - 无 jQuery答案

【问题标题】：Shift focus onkeydown - JavaScript Only - No jQuery将焦点转移到keydown - 仅限 JavaScript - 无 jQuery
【发布时间】：2018-12-27 09:41:18
【问题描述】：

我希望能够使用箭头键浏览网页上的一些可聚焦元素，仅使用 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();
        }
    }
);

【问题讨论】：

是的，有可能。看看我的回答。 ??????
圣诞快乐，新年快乐！ ??????
@PraveenKumarPurushothaman 完美运行！谢谢，伙计。
耶！节日快乐！ :D

标签： javascript jquery html css focus

【解决方案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。 ?

【讨论】：

【解决方案2】：

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

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

&lt;input class='move' /&gt;&lt;input class='move' /&gt;&lt;input class='move' /&gt;

【讨论】：

【解决方案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();
}

【讨论】：