如何使用JavaScript或jQuery通过回车键选中锚点标签？

问题根源 #

你之前的代码没效果，核心原因有两个：

• a:active是元素被**按下（未松开）时的状态，而键盘导航高亮的链接处于focus（焦点）**状态，回车按下时目标元素并不处于active状态；
• 用$('body').find('a:focus')的方式不如直接获取浏览器原生活跃元素可靠，可能因浏览器行为差异导致选择器未命中。

修复后的代码 #

$('body').on('keydown', function(e) {
  const code = e.keyCode || e.which;
  if (code === 13) {
    const activeElement = document.activeElement;
    // 判断当前焦点元素是否为锚点标签
    if (activeElement.tagName === 'A') {
      console.log(activeElement);
      // 若要触发链接跳转，直接调用click方法
      // activeElement.click();
    }
  }
});

有效原因 #

• document.activeElement是浏览器原生属性，直接指向当前获焦元素，键盘导航选中的链接必然是这个属性的取值；
• 通过标签名过滤锚点元素，避免误捕获其他可获焦元素。

内容的提问来源于stack exchange，提问作者g-ulrich