Modal中的Select2无法获取焦点，已尝试方案仍无效求助

嘿，我看你已经尝试了针对Select2+Bootstrap模态框焦点问题的常见方案，但还是没搞定，我帮你梳理下几个容易踩坑的点和修复方法：

1. 先修正代码里的语法错误 #

你最后一行的}):明显是笔误，应该改成});——这个小错误会直接导致整个JavaScript代码无法执行，这很可能是问题的根源之一！

2. 调整Select2的初始化时机 #

如果在模态框还没显示的时候就初始化Select2，很容易出现焦点绑定异常。建议把Select2的初始化逻辑绑定到模态框的shown.bs.modal事件上，确保模态框完全渲染后再初始化组件：

$('#create').on('shown.bs.modal', function() {
  $('.select').select2({
    dropdownParent: $(this), // 直接用当前模态框元素，更可靠
    placeholder: "SelectList", // 把placeholder移到Select2配置里，原生select的placeholder效果不好
    width: '100%' // 强制Select2宽度适配模态框，避免布局混乱
  });
});

3. 更精准地覆盖enforceFocus方法 #

直接把enforceFocus置空可能会影响其他模态框的正常行为，建议做针对性的排除，只跳过Select2的搜索框焦点检查：

// 先保存原生方法，避免完全覆盖
const originalEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {
  // 如果当前焦点在Select2的搜索框上，就跳过模态框的强制焦点逻辑
  if ($(document.activeElement).hasClass('select2-search__field')) {
    return;
  }
  // 其他情况依然调用原生方法
  originalEnforceFocus.call(this);
};

4. 修正HTML里的小问题 #

你提供的代码里第一个one选项的value是空值，这会导致用户选择后无法获取有效数据，建议修正：

<option value="one">one</option>

完整的修复后代码示例 #

<div id="create" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">创建条目</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <select class="form-control select" name="list" id="list" required>
          <option value="">Select List</option>
          <option value="one">one</option>
          <option value="two">two</option>
          <option value="three">three</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  // 修复模态框与Select2的焦点冲突
  const originalEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
  $.fn.modal.Constructor.prototype.enforceFocus = function() {
    if ($(document.activeElement).hasClass('select2-search__field')) {
      return;
    }
    originalEnforceFocus.call(this);
  };

  // 在模态框完全显示后初始化Select2
  $('#create').on('shown.bs.modal', function() {
    $('.select').select2({
      dropdownParent: $(this),
      placeholder: "SelectList",
      width: '100%'
    });
  });
});
</script>

试试上面的方案，应该能解决你遇到的焦点问题啦！

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