web 前端自定义 tab 键切换顺序 且不选中其他浏览器元素

思路到位，欢迎一起讨论

 <body>
    <form action=""></form>
    <input type="text" value="1" tabCheckFirst />
    <input type="text" value="2" />
    <input type="text" value="3" />
    <input type="text" value="4" tabCheckIndex="0" />
    <input type="button" value="最后一个" tabCheckIndex="-1" />
    <input type="button" value="倒二个" tabCheckIndex="-2" />

    <script src="./jquery-3.6.0.min.js"></script>
    <script>
      window.onkeydown = function (e) {
        e.preventDefault();
        let keyCode = e.keyCode;
        let target = $(e.target);

        if (!target.attr("tabCheckIndex")) {
          if (target[0].tagName === "BODY") {
            console.log(2);
            $("input[tabCheckFirst]").focus();
          } else {
            target.next().focus();
          }
        } else if (target.attr("tabCheckIndex") == 0) {
          $('input[tabCheckIndex="-2"]').focus();
        } else if (target.attr("tabCheckIndex") == -2) {
          $('input[tabCheckIndex="-1"]').focus();
        } else if (target.attr("tabCheckIndex") == -1) {
          $("input[tabCheckFirst]").focus();
        }

        if (e.keyCode == 9) {
          // console.log()
        }
      };
    </script>
  </body>
</html>
posted @ 2022-03-15 15:40  柯宝宝智商感人  阅读(299)  评论(0)  编辑  收藏  举报