Bootstrap-wysiwyg编辑器在IE11及Firefox中添加链接按钮异常问题

我之前也碰到过这个bootstrap-wysiwyg编辑器的糟心问题——在Chrome里用着好好的，可到了Firefox和IE11里，点击添加链接按钮弹出输入框后，刚准备输入内容，焦点就自动跳回主编辑器了。你说的修改CSS、阻止事件冒泡这些方案我也都试过，确实没起作用，不过针对IE11我找到了可行的修复方法，结合你已经搞定的Firefox临时方案，整理了一套完整的解决思路：

问题根源分析 #

这个bug的核心原因是IE11和Firefox对contenteditable元素的焦点处理逻辑和Chrome存在差异。当弹出链接输入框时，编辑器的contenteditable区域会触发特殊的焦点夺回行为，尤其是IE11，它对模态类弹窗的焦点管理有自己的一套规则，很容易把焦点从输入框抢回去。

针对IE11的具体修复代码 #

我们需要在弹出链接输入框后，强制锁定焦点在URL输入框上，同时拦截编辑器区域的焦点窃取行为。可以修改编辑器中处理添加链接的逻辑：

// 找到编辑器中绑定添加链接按钮的代码，替换或补充以下逻辑
$('.btn-link').on('click', function() {
  const selection = window.getSelection();
  // 确保有选中内容才弹出链接框
  if (selection.toString().length > 0) {
    const linkModal = $('#link-modal'); // 替换成你实际的链接弹窗ID
    linkModal.modal('show');

    // 弹窗完全显示后执行聚焦逻辑
    linkModal.on('shown.bs.modal', function() {
      const urlInput = $('#link-url'); // 替换成你实际的URL输入框ID
      urlInput.focus();

      // 针对IE11：阻止编辑器抢焦点
      $('.editor').on('focusin', function(e) {
        if (linkModal.is(':visible')) {
          e.stopPropagation();
          urlInput.focus();
        }
      });
    });

    // 弹窗关闭后移除监听，避免影响编辑器正常使用
    linkModal.on('hidden.bs.modal', function() {
      $('.editor').off('focusin');
    });
  }
});

这段代码的关键细节：

• 借助Bootstrap模态框的shown.bs.modal事件，确保弹窗完全渲染后再聚焦输入框，避免提前聚焦失效
• 在弹窗显示期间，监听编辑器的focusin事件，一旦编辑器试图夺回焦点，立刻把焦点切回URL输入框
• 弹窗关闭后及时移除事件监听，防止干扰编辑器后续的正常操作

跨浏览器整合方案 #

你提到已经为Firefox做了临时修复，比如延迟聚焦的方法，可以把它和IE11的方案整合，通过浏览器UA判断执行对应逻辑：

// 浏览器判断逻辑
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
const isFirefox = typeof InstallTrigger !== 'undefined';

// 在弹窗shown事件中添加：
const urlInput = $('#link-url');
if (isIE11) {
  // 执行IE11的焦点锁定逻辑
  $('.editor').on('focusin', function(e) {
    if (linkModal.is(':visible')) {
      e.stopPropagation();
      urlInput.focus();
    }
  });
  urlInput.focus();
} else if (isFirefox) {
  // 执行你的Firefox临时方案，比如延迟聚焦
  setTimeout(() => {
    urlInput.focus();
  }, 100);
} else {
  // Chrome等正常浏览器直接聚焦
  urlInput.focus();
}

这样就能覆盖所有主流浏览器的情况，彻底解决焦点跳转的问题。

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