关闭bootstrap-select / select2的自动对焦功能 [英] Turn off autofocus for bootstrap-select / select2

问题描述

http://www.bootply.com/YAQrE52K6X

  $（＃dataCombo）。selectpicker（{
 multiple：true 
}）; 
 
< div class =container> 
 
< h3>多选< / h3> 
< select id =dataComboclass =selectpickerdata-live-search =truemultiple =multiplestyle =width：400px;> 
 
< option value =one> One< / option> 
< option value =two> Two< / option> 
< option value =three> Three< / option> 
< option value =four>四< / option> 
< option value =five> Five< / option> 
< option value =six> Six< / option> 
< / select> 
 
< / div> 
  

我想关闭自动对焦，因此点击下拉列表后输入不会要求我立即搜索。试图使用 .blur 等......但到目前为止还没有。寻找解决方案。由于同样的问题，从select2移动使用bootstrap-select。设备上的键盘显示为覆盖多个下拉项目

解决方案

我无法使用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）{
 / /结束在select2容器内完成
} else {
 $（＃dataCombo）。one（'select2：open'，function（e）{
 $（document.activeElement ）.blur（）
}）; 
} 
}）; 
}）; 
  

这是我原来的jsfiddle的更新：

以下是代码背后的想法：

1.第一次打开select2 - 模糊输入（但只有一次） - 这确保了select2菜单被打开，但输入没有聚焦（因此不显示键盘） 。$
2.关闭select2菜单 - 检查导致关闭的元素。

2.1。如果该元素是 select2 块的一部分 - 忽略它并关闭继续关闭菜单。

2.2否则 - 下次打开select2菜单时我们模糊 输入（再次 - 只有一次）。

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>

I want to turn off autofocus so the input does not ask for me to search immediately after clicking the dropdown. Tried to use .blur etc... but nothing so far. Looked around for a fix. Moved to use "bootstrap-select" from "select2" due to same problem. The keyboard on devices appears covering the multiple dropdown items

解决方案

I wasn't able to fix this with bootstrap-select (seems like they have some issues with triggering the show.bs.select and shown.bs.select events), but since you also mentioned that you tried this with select2, here is a solution for the select2:

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

Check this example:
https://jsfiddle.net/yw61h28z/

Update - 2016/12/05

Managed to get it to work (took some time to play with the focus/blur/targets things).

$(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()
      });
    }
  });
});

Here is the update to my original jsfiddle:
https://jsfiddle.net/yw61h28z/4/

Here is the idea behind the code:
1. The first time the select2 is opened - blur the input (but only one time) - this makes sure the select2 menu is opened, but the input isn't focused (so the keyboard is not displayed).
2. On closing the select2 menu - check the element that caused the close.
2.1. If that element is part of the select2 block - ignore it and close keep closing the menu.
2.2 Else - The next time the select2 menu is opened we blur the input (again - only 1 time).

这篇关于关闭bootstrap-select / select2的自动对焦功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！