即使我单击输入之外的按钮，如何保持输入焦点

Question

假设我有一个输入

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

和一个按钮

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

我想要那个 onblur，它会失去焦点（通常会这样），但是当我单击此按钮时，焦点不会发生任何变化，即它不会失去焦点

Answer 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>

如果您不希望输入在尚未聚焦的情况下聚焦在单击上。

为了实现这一目标，我们不能简单地做到：

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

因为条件inp === document.activeElement永远不会成立，因为单击按钮将使按钮成为活动元素。

我们可以使用该mouseover事件并将输入的焦点信息存储在变量中，这不会遇到与以前相同的问题，因为mouseover会在按钮获得焦点之前触发。

然后在click侦听器内部，如果输入已经聚焦，我们将聚焦输入。

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

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()
  }
});