完整的网站控制与键盘(无鼠标）

full website control with keyboard (no mouse)?

本文关键字：鼠标 键盘 网站 控制      更新时间：2023-09-26

所以我开始创建一个网站（html，css，js..），我想设计我的网站，这样没有鼠标（只有键盘）的人就可以使用它。

如果我有一个div或li元素，我如何使用键盘上的选项卡或向下箭头使其聚焦？

示例：

<ul class="nav-ul">
<li>
    <a href="" class="nav-link" id="link-home">1
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">2
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">3
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">4
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">5
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">6
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">7
        <img src="assets/home.png">
    </a>
</li>

在这里，我希望每个li元素在键盘上按下向下箭头时获得焦点。

编辑：
tabindex不工作！我尝试了很多不同的方法。我想有相同的效果，当我悬停在它上面时。

编辑2

所以我会把我的问题说清楚。我不想使用标签，但它将是一个D字（左，右，上，下箭头）。

谢谢。

实现这一点的最简单方法是使用tabindex属性。 
<li>
    <a href="" class="nav-link" id="link-home" tabindex='7'>7
        <img src="assets/home.png">
    </a>
</li>

查看此处的一些示例

编辑使用左右箭头导航：

document.addEventListener("keydown", function (e) {
   var focused = document.activeElement || document.body,
       focusables= document.getElementsByClassName("focusable"),
       len = focusables.length,
       step = 0;
   focusables = Array.from(focusables).sort(function(a,b) {
       return parseInt(a.tabIndex) - parseInt(b.tabIndex);
   });
   if (e.keyCode === 39) {
       step = 1
   }
   if (e.keyCode === 37) {
       step = -1
   }
   if (focused.tabIndex <0 || focused.tabIndex === len - 1 && step === 1) 
       focusables[0].focus()
   else if (focused.tabIndex === 0 && step === -1) 
       focusables[len-1].focus()
   else
       focusables[focused.tabIndex+step].focus()
});

你需要做的任何事情都是让你的元素像这样：

<a href="" class="nav-link focusable" id="link-home" tabindex="0">1
    <img src="assets/home.png">
</a>

添加类focusable并设置tabindex工作示例

这就是您想要的吗？

var target = 1;
downarrow();
uparrow();
function downarrow() {
  $(document).keydown(function(e){
    if (e.keyCode == 40) {
      $('#' + target).addClass('active');
      $('#' + target).focus();
      $('a').not($('#' + target)).removeClass('active');
      target++;
    } 
    if (target === 8) {
     target = 1;
    };
  });
};
function uparrow() {
  $(document).keydown(function(e){
    if (e.keyCode == 38) {
      target--;
      if (target === 0) {
       target = 7;
      };
      $('#' + target).addClass('active');
      $('#' + target).focus();
      $('a').not($('#' + target)).removeClass('active');
    } 
  });
};
a.active {
  background-color: #b2b2b2;
  outline: 1px solid red ;
}
a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav-ul">
<li>
    <a id="1" href="" class="nav-link" id="link-home">1
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="2" href="" class="nav-link" id="link-home">2
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="3" href="" class="nav-link" id="link-home">3
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="4" href="" class="nav-link" id="link-home">4
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="5" href="" class="nav-link" id="link-home">5
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="6" href="" class="nav-link" id="link-home">6
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="7" href="" class="nav-link" id="link-home">7
        <img src="assets/home.png">
    </a>
</li>

https://jsfiddle.net/jpjr1nbt/5/

备注：

如果您还希望向上箭头向上滚动。密钥代码是38

相关文章：