我有一个替代的工作,我已经用了大约一个星期了。到目前为止,它似乎在我尝试过的所有安卓和ios设备上都运行良好。我在将“multiple”设置为false(即“single”类型)的select2实例上使用此选项。在这种情况下,我希望用户只做一个选择,键盘应该消失。
简而言之,在select2 close事件期间,您设置了一个标志,指示您要禁用select2 focusser接收到的任何焦点事件。当焦点事件被触发时,检查是否设置了标志,如果设置了标志,则只需将焦点移动到另一个目标。我将该标志添加为数据属性,并使用setTimeOut在一秒钟后重置该标志。
这是因为select2 close处理程序被分成两部分,而“select2 close”事件在第1部分末尾(在第2部分之前)触发。第1部分是“抽象”关闭处理程序,它实际上关闭了选择对话框,并设置控件的值。第2部分是“单个”关闭处理程序,它实际上只会导致select2重新关注自己(这就是问题所在!)。
对我来说,我在导航栏的一个按钮上添加了一个“.focus bait”类,在focusser的focus事件执行期间,我使用这个类来转移焦点。如果您在让这个重新聚焦步骤开始工作时遇到问题,请尝试其他元素(我在让它在我为集中精力而制作的按钮上工作时遇到问题)。我仍然不知道为什么,但我没有调查更多,因为我的导航按钮解决方案非常适合我的需要)。
$('body').on('focus','.select2-focusser', function(e) {
let isDisabled = $(this).parent().first().data("disable-focus");
if (isDisabled) {
console.log('Focusser: focus event aborted');
$('.focus-bait').focus();
}
});
$('body').on('select2-close','select2_focus_ctrl', function(e) {
console.log('Focusser: disabling focus event');
if ($(this).data('select2').opts.multiple != true) {
$(this).prev().data("disable-focus",true);
setTimeout(function() {
console.log('Focusser: enabling focusser');
$(this).prev().data("disable-focus",false);
}, 1000);
}
});
这是完整的代码片段。在编写它的时候,我注意到如果select2容器来自'select'元素,则'multiple'属性不存在(我的使用了'div'),因此我更改了一行代码:
.opts.multiple != true
(而不是
== false
).
$(document).ready(function() {
$('#Salutation').select2(
);
$('body').on('focus','.select2-focusser', function(e) {
let isDisabled = $(this).parent().first().data("disable-focus");
if (isDisabled) {
console.log('Focusser: focus event aborted');
$('.focus-bait').focus();
}
});
$('body').on('select2-close','.select2_focus_ctrl', function(e) {
console.log('Focusser: disabling focus event');
if ($(this).data('select2').opts.multiple != true) {
$(this).prev().data("disable-focus",true);
setTimeout(function() {
console.log('Focusser: enabling focusser');
$(this).prev().data("disable-focus",false);
}, 1000);
}
});
$('body').on('change','#Salutation', function(e) {
let theVal = $('#Salutation').select2("val");
$('#currentVal').val(theVal);
});
});
body {
background: #dddddd;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
cursor: pointer;
}
button:focus {
background: #fff;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<button type="button" class="focus-bait">
Just the bait!
</button>
<br>
<div>
<input id="currentVal" style="height:20px;width:150px"/>
</div>
<br><br>
<select class="select2_focus_ctrl" id="Salutation" style="width:200px;">
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Esquire">Esquire</option>
<option value="Other Options">Other Options</option>
<option value="Just for interest">Interesting longer item</option>
</select>
