select2的表索引问题
tabindex issue with select2
我在使用select2时遇到了表单上的制表符问题。
我有一个输入表单,我希望用户能够按顺序tab键浏览。
我已经能够排序文本输入字段,但不能选择下拉列表。
问题似乎是他们有一个默认的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++;
下拉列表没有被选中,它会跳过它们,并像它应该的那样穿过文本框。
任何帮助都非常感谢!
SOLVED: I tried:
var tabOrder = 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培训商店博客关于
选择后聚焦!
$('.select2').on('select2:select', function (e) {
$(this).focus();
});
将.select2-offscreen替换为我的.select2.
我的英语!
你可以绑定load事件并在第一次加载时触发它
可以看到,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
这段代码对我有效。我聚焦模态中的第一个元素:
$('#modalId').on('shown.bs.modal', function () {
$('#FirstElement').focus()
});
表单重置后可能发生TabIndex问题。根据文档,您可以通过将Select2控件的值设置为null来清除Select2控件中的所有当前选择:
$(selector).val(null).trigger("change");
相关文章:
- 使用scrollmagic时出现z索引问题
- Javascript中的多维数组排序索引问题
- 奇怪的索引问题
- Javascript-在数组索引中循环的问题
- 多个选定的索引查询(选择选项菜单)出现问题
- Rails AJAX 销毁 - 重新渲染索引问题
- 重定向至“索引.html问题”诊断树
- NamedNodeMap对象内部的Attr对象索引问题
- jQuery淡入淡出元素的Z索引问题
- z索引问题2
- 可拖动和可丢弃的z索引问题
- Javascript循环索引问题
- 索引编号的JavaScript克隆表单元素问题
- Jscrollpane z索引问题
- PHP未定义索引的文件上载问题
- Lawnchair索引问题
- @{{#each}}内部的索引问题
- javascript/css转换+谷歌chrome的z索引问题
- 自定义选择框的表索引问题
- 非稀疏数组中的数组索引问题