jQuery Input设置focus()后光标不闪烁且输入反向的问题求解

问题背景 #

页面布局为左侧iframe加载PDF、右侧input输入框，执行以下操作后出现异常：选中输入框内容 → 鼠标悬停在PDF区域 → 按退格键删除内容，此时document.activeElement仍指向输入框，但光标不闪烁，输入内容会反向显示。

已尝试无效方案 #

• 退格键触发时调用输入框的focus()和select()
• 用setTimeout包裹focus()
• 使用setSelectionRange方法
• 对鼠标进入PDF、退格键事件做冒泡/捕获拦截（e.stopPropagation、e.preventDefault等）

可行方案 #

方案1：利用requestAnimationFrame同步光标状态

浏览器的视觉光标状态与DOM焦点可能存在异步延迟，使用requestAnimationFrame代替setTimeout，能确保在页面下一次渲染前重置光标位置，避免状态不同步：

const inputEle = document.getElementById('inputId');

document.addEventListener('keydown', (e) => {
  // 仅处理退格键且输入框为当前激活元素的情况
  if (e.key === 'Backspace' && document.activeElement === inputEle) {
    requestAnimationFrame(() => {
      const contentLength = inputEle.value.length;
      inputEle.focus();
      // 将光标设置到文本末尾
      inputEle.setSelectionRange(contentLength, contentLength);
    });
  }
});

方案2：临时禁用PDF iframe的鼠标事件（牺牲部分PDF交互性）

当输入框内容处于选中状态时，临时禁用iframe的鼠标事件，避免PDF渲染器捕获鼠标事件干扰输入框的焦点状态：

const inputEle = document.getElementById('inputId');
const pdfIframe = document.querySelector('iframe');
let isInputSelected = false;

// 输入框内容被选中时，禁用iframe鼠标交互
inputEle.addEventListener('select', () => {
  isInputSelected = true;
  pdfIframe.style.pointerEvents = 'none';
});

// 输入框失去焦点时，恢复iframe鼠标交互
inputEle.addEventListener('blur', () => {
  isInputSelected = false;
  pdfIframe.style.pointerEvents = 'auto';
});

// 鼠标松开后（选中操作结束），若输入框未保持焦点则恢复iframe交互
document.addEventListener('mouseup', () => {
  if (!inputEle.contains(document.activeElement)) {
    isInputSelected = false;
    pdfIframe.style.pointerEvents = 'auto';
  }
});

该方案的trade-off是：输入框内容选中期间，无法操作PDF（如滚动、选择文本），但能彻底避免光标异常问题。

示例代码 #

<div class="container" style="
    display: flex;
    align-items: center;
">
  <div>
    <iframe src="https://www.ifpi.org/content/library/DMR2010.pdf"></iframe>
  </div>
  <div>
     <input id="inputId" type="text">
  </div>
</div>

问题演示 #

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