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

我只为我的项目使用select2 v.3.4.5。目前，在移动设备上查看时，打开并选择了值后键盘没有关闭，我想将其关闭。我只想在用户关注并输入内容时打开。

$(document).ready(function() {
  $('#Salutation,#Gender').select2()
    .on('change select-open', function(e) {
      setTimeout(function() {
        $('.select2-input').blur();
      }, 500);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

作为这个js

    $('#Salutation,#Gender').select2()
    .on('change select2-open',function(e){
        setTimeout(function(){
            $('.select2-input').blur();
        }, 500);
    });

我将输入搜索框设置为已经模糊，但键盘没有关闭。

我该如何存档此目的？请帮助。谢谢。

PS：可以理解，select2 v4修复了该错误，但是由于我的项目仅依赖于v3，因此我无法升级select2版本。

最佳答案

确保搜索框不会自动对焦

在Select2中无法做到这一点-每当您尝试在此输入上调用blur()函数时，它只会重新调整其焦点。

但是，通过监听open事件，我们可以将搜索框替换为我们自己的搜索框，该框不会自动对焦。只有当前处于活动状态的搜索框具有select2-focused类，因此我们可以使用它来查找它，然后创建一个新的搜索框（具有相同的select2-input类，以便保留相同的外观），然后重新自己实现搜索功能，最后将其插入DOM，然后删除旧的搜索框。

关闭选择弹出窗口后不显示键盘

Select2似乎试图以一种非常怪异的方式实现自己的blur()事件（请参见here）。

因此，不要尝试使用它，而要利用CSS选择器。 CSS中的:focus选择器选择所有具有焦点的内容。由于Select2实际上并未添加任何新的DOM元素（即，一旦在HTML中变为标准的<div>元素，<input>元素等），我们就可以找到具有焦点的对象，并成功对其进行模糊处理。

因此，通过调用$(":focus").blur()，我们找到当前具有焦点的DOM元素，然后对其进行模糊处理。

另外，通过使用select2-close作为事件，而不是change，即使用户没有选择项目，而是在其外部单击，键盘也不会打开。



我已经对其进行了测试，并且可以在运行iOS 11的iPad上使用它。这是最终的工作代码：

$(document).ready(function() {

	$("#Salutation,#Gender").select2().on("select2-open",()=>{
		let oldSearchBox = $(".select2-focused")[0]; //Get the current search box
		let parent = oldSearchBox.parentNode; //The parent of the search box (i.e. the element that holds it)

		let search = document.createElement("input"); //Create a new input box
		search.classList.add("select2-input"); //Make it look like the old one
		search.addEventListener("keyup", ()=>{ //Whenever someone releases a key, filter the results
			let results = parent.parentNode.getElementsByClassName("select2-result"); //Get all of the select box options
			let query = search.value.toLowerCase(); //Get what the user has typed (in lower case so search is case-insensitive)
			for (let result of results) { //Loop through all of the select box options
				let resultText = result.children[0].childNodes[1].nodeValue.toLowerCase(); //Get the text for that option (also in lower case)
				result.style.display =  (resultText.indexOf(query)==-1) ? "none" : "block"; //If the result text contains the search, it is displayed, otherwise it is hidden
			}
		})

		parent.appendChild(search); //Add the new search box to the page
		oldSearchBox.remove(); //Remove the old one
	});

  $("#Salutation,#Gender").select2().on("select2-close",()=>{
  	setTimeout(()=>{
			$(":focus").blur();
    }, 50);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>