我在使用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;
这就解决了这个问题。我不知道为什么或者怎么解决的。|
5条答案
按热度按时间igetnqfo1#
github中有一个解决方案,你可以创建一个js文件,然后把它包含在select2的调用下,在这个新文件中你必须粘贴以下内容:
如果你想知道更多,这对我来说是件好事:https://github.com/peledies/select2-tab-fix
© 2017 GitHub,Inc.条款隐私安全状态帮助联系GitHub API培训店博客关于我们
zdwk9cvp2#
选择后聚焦它!
对于您的代码,请将.select2-offscreen替换为my.select2。
我的英语!
kyxcudwk3#
您可以绑定加载事件并在第一次加载时触发它
如您所见,选择控件的tabindex将变为“3”而不是“-1”
JSBIN
lkaoscv74#
这段代码对我很有效,我关注模态中的第一个元素:
uyto3xhc5#
TabIndex问题可能发生在窗体重置后。根据documentation,您可以通过将Select2控件的值设置为null来清除该控件中的所有当前选择: