如何使用JavaScript模拟网站按钮点击且不抢占输入焦点？

直接调用元素.click()方法触发刷新时，浏览器默认会将焦点转移到被点击的按钮元素上，这就是输入焦点被抢占的根本原因，不需要修改点击逻辑本身，用下面两种方案就能解决问题：

方案1：焦点快照+还原（推荐） #

改动成本最低，兼容性最好，完全不影响原有刷新逻辑，用户输入过程中几乎感知不到刷新触发：

function refreshTargetTab() {
  // 提前存储当前聚焦的元素、以及输入框光标位置
  const currentActive = document.activeElement;
  const cursorStart = currentActive?.selectionStart;
  const cursorEnd = currentActive?.selectionEnd;

  // 执行原有刷新点击逻辑，加可选链避免元素不存在时报错
  const tabActionBar = document.querySelector("[title='Actions for Tab']");
  tabActionBar?.getElementsByClassName("slds-truncate")?.[0]?.click();

  // 把焦点还给之前操作的元素
  if (currentActive?.focus) {
    currentActive.focus();
    // 输入类元素还原光标位置，避免光标跳到文本开头打断输入流
    if (['INPUT', 'TEXTAREA'].includes(currentActive.tagName)) {
      currentActive.selectionStart = cursorStart;
      currentActive.selectionEnd = cursorEnd;
    }
  }
}

// 启动60秒定时任务
setInterval(refreshTargetTab, 60000);

这个方案不管刷新按钮绑定了什么业务逻辑都能正常生效，不会出现功能失效的问题，还能完整保留用户输入状态。

方案2：输入状态检测跳过触发 #

如果对刷新的实时性要求不高，可以在每次触发点击前先检测用户是否正在输入，如果是就跳过本次刷新，等下一个周期再执行：

function refreshTargetTab() {
  const activeEl = document.activeElement;
  // 判断当前是否聚焦在输入框、文本域、富文本可编辑区域
  const isUserTyping = activeEl && (
    activeEl.tagName === 'INPUT'
    || activeEl.tagName === 'TEXTAREA'
    || activeEl.isContentEditable
  );
  // 用户正在输入直接跳过，不触发点击
  if (isUserTyping) return;

  const tabActionBar = document.querySelector("[title='Actions for Tab']");
  tabActionBar?.getElementsByClassName("slds-truncate")?.[0]?.click();
}

setInterval(refreshTargetTab, 60000);

这个方案逻辑更简单，但如果用户长时间停留在输入状态，刷新动作会持续延后，适合对刷新间隔要求不严格的场景。

注意：不要尝试通过手动构造MouseEvent模拟点击、或者给按钮加tabindex=-1之类的属性绕开焦点逻辑，大部分业务系统的按钮事件绑定依赖原生click的默认触发链，这类改法很容易导致刷新功能失效。

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