Javascript 在Select2 v3上选择值后隐藏虚拟键盘

我使用select2v.3.4.5仅用于我的项目。目前，当在手机上观看时，键盘打开并选择值后不会关闭，我想关闭它。我只想在用户关注它并键入内容时打开它

$（文档）.ready（函数（）{
$（'称呼，'性别'）。选择2（）
.on（更改选择打开），功能（e）{
setTimeout（函数（）{
$（'.select2 input'）.blur（）；
}, 500);
});
})

申请表
姓名：
姓：
敬礼：
夫人
先生
错过
性别：
女性
男性
变性人
提交

确保搜索框不会自动对焦 在Select2中没有办法做到这一点-每当您尝试调用此输入上的

blur（）

函数时，它都会重新聚焦它

但是，通过收听

open

事件，我们可以将搜索框替换为我们自己的搜索框，它不会自动对焦。只有当前活动的搜索框具有类

select2 focused

，因此我们使用该类来查找它，然后创建一个新的搜索框（使用相同的

select2 input

类，使其保留相同的外观），然后自己重新实现搜索功能，最后将其插入DOM，以及删除旧的搜索框

关闭选择弹出窗口后不显示键盘 Select2似乎试图以一种非常奇怪的方式实现它自己的

blur（）

事件（请参阅）

因此，与其尝试使用CSS选择器，不如利用CSS选择器。CSS中的

：focus

选择器选择任何具有焦点的内容。由于Select2实际上没有添加任何新的DOM元素（即，一旦进入HTML，它就成为标准的

元素、

元素等），因此我们可以找到具有焦点的元素，并成功地对其调用blur

因此，通过调用

$（“：focus”）.blur（）

，我们找到当前具有焦点的DOM元素，并对其进行模糊处理

此外，通过使用

select2 close

作为我们的事件，而不是

change

，即使用户没有选择某个项目，键盘也不会打开，而是在其外部单击

---

我已经对它进行了测试，它在运行iOS 11的iPad上确实对我有效。以下是最终的工作代码：

$（文档）.ready（函数（）{
$（“#问候，#性别”）.select2（）.on（“select2 open”，（）=>{
让oldSearchBox=$（“.select2 focused”）[0]；//获取当前搜索框
让parent=oldSearchBox.parentNode；//搜索框的父项（即保存它的元素）
让search=document.createElement（“输入”）；//创建一个新的输入框
search.classList.add（“select2输入”）；//使其看起来像旧的
search.addEventListener（“keyup”，（）=>{//每当有人释放一个键时，过滤结果
让results=parent.parentNode.getElementsByCassName（“select2结果”）；//获取所有选择框选项
let query=search.value.toLowerCase（）；//获取用户键入的内容（小写，因此搜索不区分大小写）
对于（让结果的结果）{//遍历所有选择框选项
让resultText=result.children[0]。childNodes[1]。nodeValue.toLowerCase（）；//获取该选项的文本（也是小写）
result.style.display=（resultText.indexOf（query）=-1）？“none”：“block”；//如果结果文本包含搜索，则显示，否则隐藏
}
})
parent.appendChild（搜索）；//将新的搜索框添加到页面
oldSearchBox.remove（）；//删除旧的
});
$（“#问候，#性别”）.select2（）.on（“select2 close”，（）=>{
设置超时（（）=>{
$（“：focus”）.blur（）；
}, 50);
});
});

申请表
姓名：
姓：
敬礼：
夫人
先生
错过
性别：
女性
男性
变性人
提交
我有一个替代方案，我已经用了大约一周了。到目前为止，它似乎在我尝试过的所有android和ios设备上都运行良好。我在select2实例上使用此选项，该实例的“multiple”设置为false（即“single”类型）。在这种情况下，我希望用户只进行一次选择，键盘上的键应该消失

简而言之，在select2关闭事件期间，您设置了一个标志，指示您要禁用select2调焦器接收到的任何调焦事件。触发焦点事件时，检查是否设置了该标志，如果设置了，则只需将焦点移动到另一个目标。我将该标志添加为数据属性，并在一秒钟后使用setTimeOut重置该标志

这是因为select2 close处理程序分为两部分，并且“select2 close”事件在第1部分末尾（第2部分之前）触发。第1部分是“抽象”关闭处理程序，它实际上关闭选择对话框，并设置控件的值。第2部分是“单一”关闭处理程序，它实际上只是导致select2重新关注自身（这就是问题所在！）

对我来说，我在导航栏的一个按钮上添加了一个“.focus bait”类，我用这个类在调焦器的焦点事件执行期间转移焦点。如果您在重新聚焦步骤的工作中遇到问题，请尝试另一个元素（我在为聚焦而制作的按钮上遇到了问题。我仍然不确定原因，但我没有进行更多调查，因为我的导航按钮解决方案完美地满足了我的需求）

下面是完整的代码片段。在写的时候，我注意到如果
$('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();
    }   
});

//select2_focus_ctrl is a class that I add to any select2 container
//that I wish to use this focus logic e.g. add it to #Salutation,#Gender
$('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);               
    }
});