Bootstrap-Select 跳过标签索引

Question

我将 1.6.3 of this bootstrap-select 用于带有 Bootstrap 的 select 菜单。

但是，当我在表单中切换时，它会跳过具有 class selectpicker 的 select 元素：即该元素不在 Tab 键顺序中。

GitHub 上有 1.6.4 版本，但我在 CDN 上找不到它。

想知道是否有其他人运行解决了这个问题，是否有解决方案。

Answer 1

Tab顺序自然应该大致按照DOM中HTML元素的顺序。

这是一个在 1.6.3 版本中运行良好的示例

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<div class="form-group">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name">
</div>

<div class="form-group">
  <label for="name">Something</label>
  <select class="selectpicker form-control">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

<div class="form-group">
  <label for="something">Something</label>
  <input type="text" class="form-control" id="something">
</div>

如果删除 bootstrap-select，只让常规 <select> 元素成为表单的一部分，它是否仍然存在问题？如果是这样，bootstrap select 不是问题的根源。

无论哪种方式，我们都可能需要一个工作演示来诊断问题。您可以获取此答案中的 Stack Snippet 并开始向其中添加内容，直到您可以重新创建问题。

Answer 2

是的，有同样的问题，尤其是在 macbook 上，有一些偏好会跳过由 bootstrap select

生成的按钮元素

$(document).ready(function () {
        fixTabulation();
    });


function fixTabulation() {
    /* This can be used to auto-assign tab-indexes, or
    #  commented out if it manual tab-indexes have
    #  already been assigned.
    */
    $('[tabindex]:not([tabindex="0"]):not([tabindex^="-"])').filter(":visible").each(function () {           
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* We need to listen for any forward or backward Tab
    #  key event tell the page where to focus next.
    */
    $(document).on({
        'keydown': function (e) {                
            if (navigator.appVersion.match("Safari")) {                    
                if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;                        
                    if ($('[tabindex="' + Tab.i + '"]').prop('class').match('dropdown-toggle'))
                        $('[tabindex="' + Tab.i + '"]').click();
                    else
                        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
                if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
                    if ($('[tabindex="' + Tab.i + '"]').prop('class').match('dropdown-toggle'))
                        $('[tabindex="' + Tab.i + '"]').click();
                    else
                        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
            }
        }
    });

    /* We need to update Tab.i if someone clicks into
    #  a different part of the form.  This allows us
    #  to keep tabbing from the newly clicked input
    */
    $('button[tabindex], input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function (e) {
        Tab.i = $(this).attr('tabindex');
        console.log(Tab.i);
    });
}

Answer 3

显然这是一个 'feature' 的 Safari，选项卡跳过下拉菜单。它是浏览器设置的一部分。看起来它也影响了 Firefox。

http://www.tonyspencer.com/2006/05/02/tab-skips-select-form-fields-in-mac-browsers/index.html

Bootstrap-Select 跳过标签索引

Bootstrap-Select skipping tab-index

twitter-bootstrap

bootstrap-select