即使单击外部按钮，如何保持输入的焦点答案

【问题标题】：How do I keep an input focused even when I click a button outside it即使单击外部按钮，如何保持输入的焦点
【发布时间】：2021-04-24 16:16:58
【问题描述】：

假设我有一个输入

<input type="text" id="inPut" autofocus>

还有一个按钮

<button id="btn">Some text</button>

我想要那个 onblur，它失去焦点（就像通常那样），但是当我点击这个按钮时，焦点没有任何反应，即它不会失去焦点

【问题讨论】：

如果在输入没有焦点的情况下单击按钮，输入是否应该获得焦点？
@BenStephens 不应该

标签： javascript input focus onblur

【解决方案1】：

您可以使用 JS 将输入集中在按钮点击上。

const btn = document.querySelector("#btn");
const inp = document.querySelector("#inp");

btn.addEventListener("click", () => {
  inp.focus();
});

<input id="inp" type="text">
<button id="btn">Click</button>

如果您不希望输入在尚未获得焦点的情况下集中在单击上。

您可以将输入的focus 信息存储在一个变量中，在按钮的mouseover 事件上切换该变量（这会起作用，因为mouseover 在click 和mouseover 之前触发，不会生成按钮活跃）

const btn = document.querySelector("#btn");
const inp = document.querySelector("#inp");

let isInputFocused = false;

btn.addEventListener("mouseover", () => {
  if (inp === document.activeElement) {
    isInputFocused = true;
  } else {
    isInputFocused = false;
  }
});

btn.addEventListener("click", () => {
  if (isInputFocused) {
    inp.focus()
  }
});

<input id="inp" type="text">
<button id="btn">Click</button>

【讨论】：

@EmekaOrji 请检查这是否解决了您的问题，如果您有任何问题，请告诉我。
我认为第二个示例在我的手机上不起作用，因为我不希望鼠标悬停事件仅通过单击触发，但它似乎对我有用。如果有人发现这在触摸设备上不起作用，那么可能会使用 mousedown 或 pointerdown（或两者）事件来代替 mouseover（参考：stackoverflow.com/questions/7329141/…）。
@BenStephens 感谢您提及此 +1。
感谢@SomShekharMukherjee，我会尽快回复您（这里）
它很有帮助，我仍在试图弄清楚它是如何工作的，但它确实做到了！谢谢@SomShekharMukherjee