Question

我有tabindex的tabindex =＆＃34; 1＆＃34;通过tabindex =＆＃34; 20＆＃34;，这些是动态生成的。 somethimes tabindex =＆＃34; 16＆＃34;从＆＃34; 15＆＃34;点击时，不会产生那个时间。它会转到＆＃34; 1＆＃34;，但我希望它能够进入＆＃34; 17＆＃34;，我怎样才能实现这一目标？

<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>

Answer 1

    <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>

Answer 2

以下内容适用于任意数量的输入，以任何tabindex顺序，以及任何缺少的tabindex es（包括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。

Working Fiddle

Answer 3

According to Mozilla：

＆＃34;避免使用大于1的tabindex值。这样做会使依赖辅助技术的人难以浏览和操作页面内容。＆＃34;

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

如果在中心错过了某些内容，则tabindex按顺序排列，然后转到tabindex 1

3 个答案: