HTML更改tab键焦点位置

最新推荐文章于 2022-12-06 09:52:47 发布

ACGuan

最新推荐文章于 2022-12-06 09:52:47 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/89705028

版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍了如何通过HTML的tabindex属性来改变TAB键在网页元素间切换的顺序，当tabindex值设置为负数时，相关元素将不参与TAB键的焦点切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tabindex可以更改TAB键的移动顺序，tabindex的值为负时，将排除在外。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .boxParent{float:left;}
    .xialaBox{
      width:173px;
      height:200px;
      /*line-height: 200px;*/
      border:1px solid #ccc;
      text-align: center;
      display: none;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="boxParent">
      <input type="text" class="inph" tabindex="1">
      <div class="xialaBox">
        1
      </div>
    </div>
    <div class="boxParent">
      <input type="text" class="inph" tabindex="2">
      <div class="xialaBox">
        2
        <input type="text" tabindex="-1">
      </div>
    </div>
    <div class="boxParent">
      <input type="text" class="inph" tabindex="3">
      <div class="xialaBox">
        3
        <input type="text" tabindex="-1">
      </div>
    </div>
  </div>
  <script>

    var box = document.querySelector(".box");
    var inp = document.querySelectorAll("input[type=text].inph");
    var xialaBox = document.querySelectorAll(".xialaBox");
    var count = -1;
    for(var i = 0; i < inp.length; i++)
    {
      inp[i].index = i;
      inp[i].onclick = function()
      {
        count = this.index;
        for(var i = 0; i < xialaBox.length; i++)
          {
            if(i != this.index)
            {
              xialaBox[i].style.display = "none";
            }
            
          }
          xialaBox[this.index].style.display = "block";
      }
    }
    window.onkeydown = function(keyEvent){
      var keyEvent = keyEvent ? keyEvent : window.event;
      var keyCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
      
      // console.log(keyCode);
      switch (keyCode){
        case 9:
          count ++;
          if(count > inp.length)
          {
            count = inp.length-2;
          }
          console.log(count);
          inp[count].click();
          // for(var i = 0; i < xialaBox.length; i++)
          // {
          //   if(i != count)
          //   {
          //     xialaBox[i].style.display = "none";
          //   }
            
          // }
          // xialaBox[count].style.display = "block";
          break;
      } 
      
    }
  </script>
  
</body>
</html>