Select2.js按键事件独立于应用的原因及禁止输入的解决方法

其实这个现象的核心原因是Select2的输入逻辑基于它自己动态生成的DOM元素，并且事件处理优先级比你全局的document监听更高：

• 当你初始化Select2后，它会在页面上创建一套独立的DOM结构，其中包括一个用于输入/搜索的 <input class="select2-search__field"> 元素——这个元素不在你原始的HTML代码里，是动态生成的。
• 你的 $(document).keydown 监听的是全局冒泡上来的按键事件，但Select2已经在它自己的搜索输入框上绑定了专属的keydown处理函数，这些函数会在事件冒泡到document之前就执行，而且Select2的输入逻辑不会被你全局的 preventDefault 打断，因为事件已经在目标元素（Select2的输入框）层面被处理了。
• 另外，当你在Select2输入框中按键时，事件的直接目标是那个动态输入框，你的全局阻止虽然会触发，但Select2已经完成了输入的处理逻辑，所以依然能输入内容。

根据你的需求，有几种不同的实现方式：

方法1：用事件委托精准阻止Select2输入框的按键行为 #

这种方法可以保留Select2的其他功能（比如选择已有选项、清除选择），只是阻止用户输入新内容或搜索：

$(() => { 
  $("#select2-div").select2({ 
    maximumSelectionLength: 5, 
    allowClear: true, 
    tags: true, 
    width: "75%", 
    tokenSeparators: [',', ' '], 
    dropdownParent: $("#select2-div").parent() 
  });

  $(document).keydown((e) =>{ 
    // 判断当前按键的目标是否是Select2的搜索输入框
    if ($(e.target).hasClass('select2-search__field')) {
      e.preventDefault();
      e.stopPropagation(); // 阻止事件继续传播，避免其他逻辑触发
    }
    e.preventDefault(); 
  });
});

方法2：绑定Select2的open事件处理动态输入框 #

因为Select2的搜索输入框在下拉框关闭再打开时可能会被重新生成，所以可以在Select2的open事件里重新绑定阻止逻辑：

$(() => { 
  const $select = $("#select2-div").select2({ 
    maximumSelectionLength: 5, 
    allowClear: true, 
    tags: true, 
    width: "75%", 
    tokenSeparators: [',', ' '], 
    dropdownParent: $("#select2-div").parent() 
  });

  // 每次下拉框打开时，给新生成的搜索输入框绑定阻止事件
  $select.on('select2:open', function() {
    $('.select2-search__field').off('keydown').on('keydown', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  });

  $(document).keydown((e) =>{ 
    e.preventDefault(); 
  });
});

方法3：完全禁用Select2的输入/交互功能 #

如果你想直接让整个Select2控件无法输入甚至无法交互，可以直接设置控件为禁用状态：

方式A：在HTML中设置disabled属性 #

<select multiple id="select2-div" disabled>
  <option value="yes">Yes</option>
  <option value="no">No</option>
  <option value="maybe">Maybe</option>
  <option value="idontknow">I don't know</option>
</select>

方式B：在Select2初始化时配置disabled #

$("#select2-div").select2({ 
  maximumSelectionLength: 5, 
  allowClear: true, 
  tags: true, 
  width: "75%", 
  tokenSeparators: [',', ' '], 
  dropdownParent: $("#select2-div").parent(),
  disabled: true // 添加禁用配置
});

内容的提问来源于stack exchange，提问作者ted