关闭 bootstrap-select / select2 的自动对焦

Posted 2023-05-07

【中文标题】关闭 bootstrap-select / select2 的自动对焦

【英文标题】：Turn off autofocus for bootstrap-select / select2

【发布时间】：2017-03-23 09:27:52

【问题描述】：

http://www.bootply.com/YAQrE52K6X

    $("#dataCombo").selectpicker(
    multiple:true
    );

    <div class="container">

  <h3>Multiple Select</h3>
  <select id="dataCombo" class="selectpicker" data-live-search="true" multiple="multiple" style="width:400px;">

    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
    <option value="six">Six</option>
  </select>

</div>

我想关闭自动对焦，这样输入就不会要求我在单击下拉菜单后立即进行搜索。尝试使用.blur 等...但到目前为止还没有。四处寻找解决办法。由于同样的问题，移至使用“select2”中的“bootstrap-select”。设备上的键盘出现覆盖多个下拉项

【问题讨论】：

您要禁用允许搜索的输入还是只希望它不自动对焦？

无法自动对焦 - 我仍想使用搜索框，但在单击下拉菜单时不会立即使用。这将停止键盘立即出现在设备上。

【参考方案1】：

我无法使用 bootstrap-select 解决此问题（似乎他们在触发 show.bs.select 和 shown.bs.select 事件时遇到了一些问题），但是由于您还提到您使用 select2 进行了尝试，所以这里有一个select2的解决方案：

  $("#dataCombo").select2(
    closeOnSelect: false
  );
  $("#dataCombo").on('select2:open', function () 
    $(document.activeElement).blur()
  );

查看此示例：https://jsfiddle.net/yw61h28z/

更新 - 2016/12/05

设法让它工作（花了一些时间来处理焦点/模糊/目标的东西）。

$(document).ready(function() 
  $("#dataCombo").select2(
    closeOnSelect: false
  );
  $("#dataCombo").one('select2:open', function (e) 
    $(document.activeElement).blur()
  );
  $("#dataCombo").on('select2:close', function(e) 
    if ($(event.target).parents('.select2').length) 
      // The closing was done inside the select2 container
     else 
      $("#dataCombo").one('select2:open', function (e) 
        $(document.activeElement).blur()
      );
    
  );
);

这是我原来的 jsfiddle 的更新：https://jsfiddle.net/yw61h28z/4/

以下是代码背后的想法： 1.第一次打开select2 - 模糊input（但只有一次） - 这确保select2菜单打开，但input没有聚焦（所以键盘不显示）。 2. 关闭 select2 菜单时 - 检查导致关闭的元素。 2.1。如果该元素是 select2 块的一部分 - 忽略它并关闭继续关闭菜单。 2.2 Else - 下次打开 select2 菜单时，我们 blur input （再次 - 仅 1 次）。

【讨论】：

感谢您在上面的回答。这个小问题是，当您现在想要使用搜索时，您只能设法在失去焦点之前键入 1 个字符，因为选择会在触发模糊的类型时打开。关于修复您创建的小提琴的任何想法？

【参考方案2】：

对于引导选择选择器，您可以这样做，它对我有用：

$(document).on("change","select.selectpicker",function()
    $(this).next().next().children(".bs-searchbox").children("input[type='search']").blur()
);