即使单击输入之外的按钮，我如何保持输入的焦点 您可以使用 JS 将输入重点放在按钮点击上如果您不希望输入聚焦于点击如果它尚未聚焦

问题描述

假设我有一个输入

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

和一个按钮

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

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

解决方法

您可以使用 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 和 { {1}} 不会使按钮处于活动状态）

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