tabindex按顺序进行，如果在中心遗漏了什么，则转到tabindex 1

tabindex goes in order if something missed in center then it goes to tabindex 1

本文关键字：tabindex 什么 在中心 顺序 如果      更新时间：2023-09-26

im的tabindex从tabindex="1"到tabindex="20"，这些都是动态生成的。有些时候tabindex="16"不会生成，而从"15"点击会变成"1"，但我希望它变成"17"，我该如何实现？

<script>
        $(document).on("keypress", ".TabOnEnter" , function(e)
          {
            //Only do something when the user presses enter
            if( e.keyCode ==  13 )
            {
               var nextElement = $('[tabindex="' + (this.tabIndex+1)  + '"]');
               console.log( this , nextElement );
               if(nextElement.length )
                 nextElement.focus()
               else
                 $('[tabindex="1"]').focus();  
            }   
          });
    </script>

    <script>
            $(document).on("keypress", ".TabOnEnter" , function(e)
              {
                //Only do something when the user presses enter
                if( e.keyCode ==  13 )
                {
                   var nextIndex = this.tabIndex + 1;
                   var nextElement = $('[tabindex="' + nextIndex  + '"]');
                   console.log( this , nextElement );
                   while(!nextElement.length){
                       nextIndex++;
                       if(nextIndex>20){
                           break;
                       }else{
                           nextElement = $('[tabindex="' + nextIndex + '"]');
                       }
                  }
                  nextElement.focus();       
                }   
              });   
    </script>

以下内容将以任何tabindex顺序处理任何数量的输入，并处理任何丢失的tabindexes（包括tabindex=1）。

如果您在最后一个tabindex上，那么接下来将关注具有最低tabindex的输入。

$(document).on('keypress', '.TabOnEnter' , function(e) {
  if(e.which===13) {
    var tabs= $('[tabindex]'),
        firstElement= tabs[0],
        nextElement,
        self= this;
    tabs.each(function() {
      if(this.tabIndex > self.tabIndex && 
         (!nextElement || this.tabIndex < nextElement.tabIndex)
        ) {
        nextElement= this;
      }
      if(this.tabIndex < firstElement.tabIndex) {
        firstElement= this;
      }
    });
    (nextElement || firstElement).focus();      
  }
});

请注意，建议使用event.which而不是event.keyCode。

工作Fiddle

根据Mozilla：

"避免使用大于1的tabindex值。这样做将使依赖辅助技术的人难以导航和操作页面内容。"

只需将需要键盘聚焦的元素的tabindex设置为0，并以对内容有逻辑意义的方式对HTML元素进行排序。

相关文章：