尽管在其他地方单击，但仍保持文本字段的焦点

Question

尽管单击了红色 div，我仍希望保持文本字段的焦点。我尝试了不同的方法，为什么没有效果？

function stopEvent(e) {
   e.stopPropagation();
   e.preventDefault();
   return false;    
}
function setFocus(e) {
   document.getElementById("textField").focus();
   stopEvent(e);
}
document.getElementById("textField").focus();

<div onmouseover="setFocus(event);" onfocus="this.blur();">
  <div style="background-color:red; height:100px;" onclick="stopEvent(event)" onfocus="this.blur();">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

Answer 1

如果您希望它始终处于焦点状态，只需添加 document.getElementById("textField").addEventListener('blur',() => document.getElementById("textField").focus())。

document.getElementById("textField").focus();
document.getElementById("textField").addEventListener('blur',() => 
document.getElementById("textField").focus())

<div>
  <div style="background-color:red; height:100px;">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

如果你想在点击红色 div 时重新聚焦，只需将 'click' 事件侦听器添加到 redDiv。

window.textField.focus();
window.redBox.addEventListener('click',() => window.textField.focus())

<div>
  <div id="redBox" style="background-color:red; height:100px;">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

Answer 2

您在点击区域使用了 stopEvent 而不是 setFocus div。此外，您在 setFocus 中没有 return false，因此 stopEvent 中的 return false 没有用。

function stopEvent(e) {
   e.stopPropagation();
   e.preventDefault();
   return false;    
}
function setFocus(e) {
   document.getElementById("textField").focus();
   return stopEvent(e);
}
document.getElementById("textField").focus();

<div onmouseover="setFocus(event);" onfocus="this.blur();">
  <div style="background-color:red; height:100px;" onclick="setFocus(event)" onfocus="this.blur();">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

Answer 3

你可以做到这一点

const field = document.getElementById("textField");

field.addEventListener("blur", function( event ) {
  setTimeout(function () {
      field.focus();
    }, 100);   
}, true);

<div style="background-color:red; height:100px;">Click area</div>
<div><input id="textField" type="text" value="focused" /></div>

尽管在其他地方单击，但仍保持文本字段的焦点

Keep a text field focused despite clicking elsewhere

html

javascript

focus