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

Question

Let's say I have an input

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

and a button

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

I want that onblur, it loses focus (as it normally would), but when I click this button, nothing happens to the focus ie it does not lose focus

Answer 1

You can use JS to focus the input on button click.

 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>

If you don't want the input to focus on click if it is not already focused.

You can store input's focus information in a variable, toggle that variable on button's mouseover event (this would work because mouseover fires before click and mouseover doesn't make the button active)

 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>