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

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

import 'package:cloud_firestore/cloud_firestore.dart';

class SearchService {
  searchByName(String searchField) {
    return Firestore.instance
        .collection('task')
        .where('title',
        isEqualTo: searchField.substring(0, 1).toUpperCase())
        .getDocuments();
  }
}

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

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

将焦点转移到keydown上-仅JavaScript-没有jQuery

3 个答案: