Select2打开焦点集中的下拉菜单 [英] Select2 open dropdown on focus
问题描述
我有一个包含多个文本输入和一些select2元素的表单. 使用键盘在字段之间切换时效果很好-Select2元素的行为类似于表单元素，并在切换时获得焦点. 我想知道Select2元素获得焦点时是否可以打开下拉菜单.
I have a form with multiple text inputs and some select2 elements. Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing. I was wondering if it is possible to open the dropdown when the Select2 element gets focus.
这是我到目前为止尝试过的:
Here's what I've tried so far:
$("#myid").select2().on('select2-focus', function(){
$(this).select2('open');
});
但是使用此代码会使下拉菜单在做出选择后再次打开.
But using this code makes the dropdown to open again after a selection is made.
推荐答案
v4.0 +的工作代码 *(包括4.0.7)
以下代码将在 initial 焦点上打开菜单，但在菜单关闭后重新选择焦点时，不会陷入无限循环.
Working Code for v4.0+ *(including 4.0.7)
The following code will open the menu on the initial focus, but won't get stuck in an infinite loop when the selection re-focuses after the menu closes.
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
});
// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
$(e.target).data("select2").$selection.one('focus focusin', function (e) {
e.stopPropagation();
});
});
说明
防止无限聚焦循环
注意:focus事件被触发两次
Explanation
Prevent Infinite Focus Loop
Note: The focus event is fired twice
- 一旦进入该字段，便会
- 再次点击打开的下拉菜单以恢复焦点
我们可以通过查找焦点事件类型之间的差异来防止无限循环.由于我们只想在控件的初始焦点上打开菜单，因此我们必须以某种方式区分以下引发的事件:
We can prevent an infinite loop by looking for differences between the types of focus events. Since we only want to open the menu on the initial focus to the control, we have to somehow distinguish between the following raised events:
这样做很难实现跨浏览器的友好方式，因为浏览器会发送不同的信息以及不同的事件，并且Select2对其内部事件的触发进行了许多细微更改，从而中断了先前的流程.
Doing so it a cross browser friendly way is hard, because browsers send different information along with different events and also Select2 has had many minor changes to their internal firing of events, which interrupt previous flows.
一种可行的方法是在 closing 事件期间附加事件处理程序菜单，并使用它捕获即将发生的focus事件并防止它使DOM冒泡.然后，使用委托的侦听器，仅当focus事件一直冒泡到document
One way that seems to work is to attach an event handler during the closing event for the menu and use it to capture the impending focus event and prevent it from bubbling up the DOM. Then, using a delegated listener, we'll call the actual focus -> open code only when the focus event bubbles all the way up to the document
如该github问题中所述#4025-下拉菜单无法在标签页焦点上打开 ，我们应该检查以确保仅在:enabled选择元素上调用'open'，例如:
As noted in this github issue #4025 - Dropdown does not open on tab focus, we should check to make sure we only call 'open' on :enabled select elements like this:
$(this).siblings('select:enabled').select2('open');
Select2 DOM遍历
我们必须稍微遍历DOM，所以这是Select2生成的HTML结构的地图
Select2 DOM traversal
We have to traverse the DOM a little bit, so here's a map of the HTML structure generated by Select2
以下是一些相关的代码段:
Here are some of the relevant code sections in play:
.on('mousedown'. .. .trigger('toggle')
.on('toggle' ... .toggleDropdown()
.toggleDropdown ... .open()
.on('focus' ... .trigger('focus'
.on('close' ... $selection.focus()
.on('mousedown' ... .trigger('toggle')
.on('toggle' ... .toggleDropdown()
.toggleDropdown ... .open()
.on('focus' ... .trigger('focus'
.on('close' ... $selection.focus()
过去曾经有两次打开select2的情况，但已在问题#3503中进行了修复，这应该可以防止出现垃圾
It used to be the case that opening select2 fired twice, but it was fixed in Issue #3503 and that should prevent some jank
PR#5357 似乎破坏了之前的焦点代码4.05
PR #5357 appears to be what broke the previous focus code that was working in 4.05
$('.select2').select2({});
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
});
// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
$(e.target).data("select2").$selection.one('focus focusin', function (e) {
e.stopPropagation();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>
<select class="select2" style="width:200px" >
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
在Chrome，FF，Edge，IE11上进行了测试
Tested on Chrome, FF, Edge, IE11
这篇关于Select2打开焦点集中的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
