Question

我目前无法在Firefox（38.0.5）中标记为启用Select2的<select>元素 - 换句话说，无法以鼠标方式访问选择<option>。在Chrome中，您可以在表单中进行制表，然后按输入，以便开始在Select2 select元素中选择一个项目。我没有在其他浏览器中测试过，但在提交实际错误报告之前，我想验证其他人是否遇到同样的问题？

你可以duplicate on the demo page。

Select2 v4.0.0
Twitter Bootstrap 3.3.4（虽然没有添加任何内容为Bootstrap风格的其他项目）
Firefox v38.0.5

Answer 1

虽然它不是一个完美的解决方案，但以下是我们用来模拟包含Select2元素的HTML表单上的普通键盘导航。

/**
 * WARNING: untested using Select2's option ['selectOnClose'=>true]
 *
 * This code was written because the Select2 widget does not handle
 * tabbing from one form field to another.  The desired behavior is that
 * the user can use [Enter] to select a value from Select2 and [Tab] to move
 * to the next field on the form.
 *
 * The following code moves focus to the next form field when a Select2 'close'
 * event is triggered.  If the next form field is a Select2 widget, the widget
 * is opened automatically.
 *
 * Users that click elsewhere on the document will cause the active Select2
 * widget to close.  To prevent the code from overriding the user's focus choice
 * a flag is added to each element that the users clicks on.  If the flag is
 * active, then the automatic focus script does not happen.
 *
 * To prevent conflicts with multiple Select2 widgets opening at once, a second
 * flag is used to indicate the open status of a Select2 widget.  It was
 * necessary to use a flag instead of reading the class '--open' because using the
 * class '--open' as an indicator flag caused timing/bubbling issues.
 *
 * To simulate a Shift+Tab event, a flag is recorded every time the shift key
 * is pressed.
 */
jQuery(document).ready(function($) {
    var docBody = $(document.body);
    var shiftPressed = false;
    var clickedOutside = false;
    //var keyPressed = 0;

    docBody.on('keydown', function(e) {
        var keyCaptured = (e.keyCode ? e.keyCode : e.which);
        //shiftPressed = keyCaptured == 16 ? true : false;
        if (keyCaptured == 16) { shiftPressed = true; }
    });
    docBody.on('keyup', function(e) {
        var keyCaptured = (e.keyCode ? e.keyCode : e.which);
        //shiftPressed = keyCaptured == 16 ? true : false;
        if (keyCaptured == 16) { shiftPressed = false; }
    });

    docBody.on('mousedown', function(e){
        // remove other focused references
        clickedOutside = false;
        // record focus
        if ($(e.target).is('[class*="select2"]')!=true) {
            clickedOutside = true;
        }
    });

    docBody.on('select2:opening', function(e) {
        // this element has focus, remove other flags
        clickedOutside = false;
        // flag this Select2 as open
        $(e.target).attr('data-s2open', 1);
    });
    docBody.on('select2:closing', function(e) {
        // remove flag as Select2 is now closed
        $(e.target).removeAttr('data-s2open');
    });

    docBody.on('select2:close', function(e) {
        var elSelect = $(e.target);
        elSelect.removeAttr('data-s2open');
        var currentForm = elSelect.closest('form');
        var othersOpen = currentForm.has('[data-s2open]').length;
        if (othersOpen == 0 && clickedOutside==false) {
            /* Find all inputs on the current form that would normally not be focus`able:
             *  - includes hidden <select> elements whose parents are visible (Select2)
             *  - EXCLUDES hidden <input>, hidden <button>, and hidden <textarea> elements
             *  - EXCLUDES disabled inputs
             *  - EXCLUDES read-only inputs
             */
            var inputs = currentForm.find(':input:enabled:not([readonly], input:hidden, button:hidden, textarea:hidden)')
                .not(function () {   // do not include inputs with hidden parents
                    return $(this).parent().is(':hidden');
                });
            var elFocus = null;
            $.each(inputs, function (index) {
                var elInput = $(this);
                if (elInput.attr('id') == elSelect.attr('id')) {
                    if ( shiftPressed) { // Shift+Tab
                        elFocus = inputs.eq(index - 1);
                    } else {
                        elFocus = inputs.eq(index + 1);
                    }
                    return false;
                }
            });
            if (elFocus !== null) {
                // automatically move focus to the next field on the form
                var isSelect2 = elFocus.siblings('.select2').length > 0;
                if (isSelect2) {
                    elFocus.select2('open');
                } else {
                    elFocus.focus();
                }
            }
        }
    });

    /**
     * Capture event where the user entered a Select2 control using the keyboard.
     * http://stackoverflow.com/questions/20989458
     * http://stackoverflow.com/questions/1318076
     */
    docBody.on('focus', '.select2', function(e) {
        var elSelect = $(this).siblings('select');
        if (elSelect.is('[disabled]')==false && elSelect.is('[data-s2open]')==false
            && $(this).has('.select2-selection--single').length>0) {
            elSelect.attr('data-s2open', 1);
            elSelect.select2('open');
        }
    });

});

Answer 2

建立在zDaniels上的优秀答案。

我已经创建了一个bower可安装版本的代码。

$ bower install select2-tab-fix

的来源和文件

https://github.com/peledies/select2-tab-fix

Answer 3

这真的让我很烦，所以我把它设置为焦点开放。因此，当选项卡切换到选择时，它将自动打开。

$(document).ready(function () {
    $(".select2-selection").on("focus", function () {
        $(this).parent().parent().prev().select2("open");
    });
});

希望有所帮助，我使用的是Bootstrap和firefox的不同版本，所以如果不是，请告诉我！

Answer 4

使用@zDaniels答案，它的工作就像是一种魅力。但是唯一的问题是它不会关闭最后一个select2。要解决此问题，您可以在最后一个select2元素的on-change事件中使用以下行编写一个jquery函数。我希望这有助于进行调整。

    $(document).ready(function () {
      $(YOUR_LAST_ELEMENT).on("change", function () {
        $(this).parent().parent().prev().select2("close");
      });
    });

选择2 v4无法选中，按回车键，然后选择，使用Firefox（也称为无鼠标访问）

4 个答案: