select2的tabindex問題

Question

在使用 select2 時，我的表單上的 taborder 出現問題。

我有一個輸入表單，我希望用戶能夠按順序瀏覽。

我已經能夠訂購文本輸入字段，但不能訂購 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;

這已經解決了這個問題。 我不完全知道為什么或如何：|

Answer 1

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培訓商店博客關於

Answer 2

選擇后將其聚焦！

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

為您的代碼將.select2-offscreen替換為我的.select2。

SF我的英語！

Answer 3

您可以綁定加載事件並在首次加載時觸發它

如您所見，select控件的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

Answer 4

這段代碼對我有用。 我將重點放在模態中的第一個元素上：

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

Answer 5

TabIndex 問題可能在表單重置后發生。 根據文檔，您可以通過將控件的值設置為 null 來清除 Select2 控件中的所有當前選擇：

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