Bootstrap-Select 跳过选项卡索引

Question

我正在使用 1.6.3 中的 bootstrap-select 来选择带有 Bootstrap 的菜单。

但是，当我通过我的表单进行 Tab 键时，它会跳过具有类 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> 元素成为表单的一部分，它仍然有问题吗？如果是这样，引导选择不是问题的根源。

无论哪种方式，我们都可能需要一个有效的演示来诊断问题。您可以在此答案中获取 Stack Snippet 并开始添加它，直到您可以重现问题为止。

Answer 2

是的，有同样的问题，特别是在macbooks上，有一些偏好会跳过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

显然这是 Safari 的一个“功能”，它可以跳过下拉菜单。它是浏览器设置的一部分。看起来它也会影响 Firefox。

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