Question

我尝试在网页中使用最新的select2 v4.0.3库。我使用this page上的给定示例进行标记和标记化。我在不同的浏览器中测试过它。它工作正常，但在Internet Explorer v.11中它表现得很奇怪：

我尝试添加一个不属于选项的新元素。键入几个字符后，光标被拿走，我无法完成我输入的单词。当我点击选择框以获取光标时，半输入的单词消失了。所以似乎不可能输入超过3-4个字符。在IE中打开它时，我在select2.github.io/examples页面上遇到了相同的内容。

<html>
<head>
    <link rel="stylesheet" href="css/select2.css" type="text/css" />
    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".js-example-tokenizer").select2({
          tags: true,
          tokenSeparators: [',', ' ']
        });
    });
    </script>
    <select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
</body>
</html>

不使用标记，select2在IE中也能正常工作。但我想使用多选标记控件，用户也可以输入自由文本作为选定选项。

是否有一种解决方法让select2在IE中使用标记和标记化？

Fiddle example在IE11上用于测试。

issue on GitHub与问题有关。

Answer 1

当输入元素具有焦点并打开选项下拉菜单时，这两个类分别位于select2-container--focus select2-container--open上。

当我们开始键入内容时，打开下拉菜单会使输入元素失去焦点（模糊）。 Select2需要重新关注该元素。实际上，在Select2源代码中，我们可以看到更新方法是通过重新关注元素this.$search.focus()（check here）来完成的。

此代码在大多数浏览器中都可以正常运行，但在IE v11中却无法正常工作，因为IE并未重新专注于此Select2源代码的输入。类select2-container--focus消失，焦点停留在下拉菜单上，该菜单会产生错误。

在Select2的最新版本中，他们似乎尝试了修复程序：check here。可悲的是，经过测试，它仍然无法正常工作。我在这里看到的唯一解决方案是覆盖Select2源代码，直到发布修复程序为止。否则，您需要使用不存在该错误的版本（例如，注释中提到的4.0.2）。

基于GitHub问题（尤其是这个问题：GitHub issue），解决方案可能是：

JS Fiddle

<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/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
  // Override update method
  $.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
    var c = this.$search[0] == document.activeElement;
    this.$search.attr("placeholder", "");
    a.call(this, b);
    this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
    this.resizeSearch();
    if (c) {
      var self = this;
      window.setTimeout(function() {
        self.$search.focus();
      }, 0);
    }
  };

  $(document).ready(function() {
    $(".js-example-tokenizer").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
  });
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Select2标签限制IE浏览器中的输入字符

1 个答案: