asp.net 选项卡索引与select2有关的问题

72qzrwbm  于 2023-03-04  发布在  .NET
关注(0)|答案(5)|浏览(150)

我在使用select2时遇到了窗体上的标签顺序问题。
我有一个输入表单,希望用户能够按顺序切换。
我已经能够排序文本输入字段,但不能排序select2下拉列表。
看起来问题出在它们有一个默认的tabindex ="-1",如下所示;

>  <div id="s2id_ctl00_MainContent_ddlAreaKept" class="select2-container
> form-control">
>     <a class="select2-choice" tabindex="-1" onclick="return false;" href="javascript:void(0)">
>     <input id="s2id_autogen4" class="select2-focusser select2-offscreen" type="text" tabindex="0">
>     <div class="select2-drop select2-display-none select2-with-searchbox">
>     </div>
>     <select id="ctl00_MainContent_ddlAreaKept" class="form-control select2-offscreen" name="ctl00$MainContent$ddlAreaKept" tabindex="-1">

我还编写了下面的javascript来向字段添加tabIndex值,但它并没有按照我的意愿工作。

var tabOrder = 0;

document.getElementById("ctl00_MainContent_ddlAreaKept").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_ddlNCDYears").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtVehicleValue").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtAge").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtForename").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtSurname").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtEmail").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtPhoneNumber").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_btnGetQuote").tabIndex = tabOrder++;

下拉列表不会被标签化,它会跳过它们,并按照它应该的方式浏览文本框。
任何帮助非常感谢!
解决:我尝试:

var tabOrder = 1;

这就解决了这个问题。我不知道为什么或者怎么解决的。|

igetnqfo

igetnqfo1#

github中有一个解决方案,你可以创建一个js文件,然后把它包含在select2的调用下,在这个新文件中你必须粘贴以下内容:

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();
                }
            }
        }
    });

    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');
        }
    });

});

如果你想知道更多,这对我来说是件好事:https://github.com/peledies/select2-tab-fix
© 2017 GitHub,Inc.条款隐私安全状态帮助联系GitHub API培训店博客关于我们

zdwk9cvp

zdwk9cvp2#

选择后聚焦它!

$('.select2').on('select2:select', function (e) {
$(this).focus();
});

对于您的代码,请将.select2-offscreen替换为my.select2。
我的英语!

kyxcudwk

kyxcudwk3#

您可以绑定加载事件并在第一次加载时触发它
如您所见,选择控件的tabindex将变为“3”而不是“-1”

$(document).ready(function() {

   var $select2 = $("#tab2");
    $select2.data('placeholder', 'Please Chhose').select2({
                  formatNoMatches: function (term) {
                        return 'No Match "' + term + '" Item';
                    },
                    allowClear: true
 }).on("load", function(e) { 
     $(this).prop('tabindex',3);
 }).trigger('load');

  $("#tab1").prop('tabindex',4);
  $("#tab3").prop('tabindex',2);
  $("#tab4").prop('tabindex',1);

}

JSBIN

lkaoscv7

lkaoscv74#

这段代码对我很有效,我关注模态中的第一个元素:

$('#modalId').on('shown.bs.modal', function () {
     $('#FirstElement').focus()
});
uyto3xhc

uyto3xhc5#

TabIndex问题可能发生在窗体重置后。根据documentation,您可以通过将Select2控件的值设置为null来清除该控件中的所有当前选择:

$(selector).val(null).trigger("change");

相关问题