Javascript 使用select2标记索引问题

使用select2时，我的表单上的taborder出现问题

我有一个输入表单，我希望用户能够按顺序通过制表符

我可以对文本输入字段进行排序，但不能选择2个下拉列表

问题似乎在于他们有一个默认的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">

dropdownlists没有标签，它会跳过它们并按其应该的方式遍历文本框

非常感谢任何帮助

解决方法：我尝试：

var tabOrder = 1;

---

这就解决了问题。我不知道确切的原因和方法：|

您可以绑定加载事件并在第一次加载时触发它

如您所见，select控件的tabindex将变为“3”，而不是“-1”

---

这个代码对我很有用。我关注模态中的第一个元素：

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

---

github中有一个解决方案，您可以创建一个js文件，然后在调用select2时将其包括在内，在这个新文件中，您必须粘贴以下内容：

jQuery（文档）.ready（函数（$）{
var docBody=$（document.body）；
var shiftPressed=false；
var clickedOutside=false；
//按下var键=0；
docBody.on（'keydown'，函数（e）{
var keyCaptured=（e.keyCode？e.keyCode:e.which）；
//shiftPressed=keyCaptured==16？真：假；
如果（keyCaptured==16）{shiftPressed=true；}
});
docBody.on（'keyup'，函数（e）{
var keyCaptured=（e.keyCode？e.keyCode:e.which）；
//shiftPressed=keyCaptured==16？真：假；
如果（keyCaptured==16）{shiftPressed=false；}
});
docBody.on（'mousedown'，函数（e）{
//删除其他重点引用
单击外侧=false；
//记录焦点
如果（$（e.target）.is（'[class*=“select2”]'）！=true）{
单击外侧=真；
}
});
docBody.on（'select2:opening'，函数（e）{
//此元素具有焦点，请删除其他标志
单击外侧=false；
//将此Select2标记为打开
$（e.target）.attr（'data-s2open'，1）；
});
docBody.on（'select2:closing'，函数（e）{
//删除标志，因为Select2现在已关闭
$（e.target）.removeAttr（'data-s2open'）；
});
docBody.on（'select2:close'，函数（e）{
var-elSelect=$（e.target）；
elSelect.removeAttr（'data-s2open'）；
var currentForm=elSelect.closest（'form'）；
var othersOpen=currentForm.has（'[data-s2open]'）。长度；
if（othersOpen==0&&clickedOutside==false）{
/*查找当前表单上通常无法聚焦的所有输入：
*-包括父元素可见的隐藏元素（选择2）
*-排除隐藏、隐藏和隐藏的元素
*-不包括禁用的输入
*-不包括只读输入
*/
var inputs=currentForm.find（':input:enabled:not（[readonly]，input:hidden，button:hidden，textarea:hidden'））
.not（函数（）{//不包括具有隐藏父级的输入
return$（this.parent（）.is（':hidden'）；
});
var-elFocus=null；
$。每个（输入、功能（索引）{
var elInput=$（本）；
if（elInput.attr（'id'）==elSelect.attr（'id'））{
if（shiftPressed）{//Shift+Tab
elFocus=输入。eq（索引-1）；
}否则{
elFocus=输入。eq（索引+1）；
}
返回false；
}
});
if（elFocus！==null）{
//自动将焦点移动到窗体上的下一个字段
var isSelect2=elFocus.sillides（'.select2'）。长度>0；
如果（第2条）{
elFocus.select2（“打开”）；
}否则{
elFocus.focus（）；
}
}
}
});
docBody.on（'focus'，'select2'，函数（e）{
var-elSelect=$（this）.sibbines（'select'）；
如果（elSelect.is（'[disabled]'）==false&&elSelect.is（'[data-s2open]'）==false
&&$（this）.has（'.select2 selection--single'）。长度>0）{
elSelect.attr（'data-s2open'，1）；
elSelect.select2（“打开”）；
}
});
});选择后聚焦它

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

对于您的代码，请用my.select2替换为offscreen

这是我的英语
 谢谢！但我通过简单地启动“var tabOrder=1”来解决问题。这解决了问题，但感谢您的帮助！这实际上发生在我的django select2插件上
$('#modalId').on('shown.bs.modal', function () {
     $('#FirstElement').focus()
});

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