点击红色Div时保持文本框聚焦失败，求原因及解决方法

嘿，我来帮你捋清楚这个问题：你想点击红色div时让输入框保持聚焦，但当前代码没生效，核心原因是点击非可聚焦元素（比如默认的div）时，浏览器会自动让当前聚焦的输入框失去焦点——这个行为是浏览器的默认交互逻辑，你之前用的stopPropagation()和preventDefault()根本管不住它，因为div的点击本来就没有需要阻止的默认行为（比如跳转、表单提交这类）。

先拆解你当前代码里的无效点：

• stopEvent里的e.preventDefault()完全没用，点击div没有可阻止的默认操作；
• 给div加的onfocus="this.blur()"纯属多余，默认情况下div是不可聚焦元素，除非设置了tabindex，否则它根本不会拿到焦点；
• setFocus只在mouseover时触发，点击红色div的瞬间，输入框还是会丢焦点，这个函数没覆盖到点击场景。

最简修复方案 #

我们只需要在红色div的点击事件里，明确让输入框重新获得焦点就行，多余的代码全部砍掉：

<script>
// 初始聚焦输入框
document.getElementById("textField").focus();

// 点击红色区域时维持输入框焦点
function keepInputFocus() {
  document.getElementById("textField").focus();
}
</script>
<div>
  <div style="background-color:red; height:100px;" onclick="keepInputFocus()">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

更推荐的原生事件绑定写法 #

如果不想用内联事件（这种写法在现代开发里更规范），可以改成这样：

<div>
  <div id="redClickArea" style="background-color:red; height:100px;">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>
<script>
const textField = document.getElementById("textField");
const redArea = document.getElementById("redClickArea");

// 页面加载完成后先聚焦输入框
textField.focus();

// 给红色区域绑定点击事件，重新聚焦输入框
redArea.addEventListener('click', () => {
  textField.focus();
});
</script>

这个方案为什么有效？当你点击红色div时，浏览器会先让输入框失去焦点，但我们的点击事件处理函数会立刻把焦点拉回输入框——这个过程快到用户完全察觉不到，看起来就像输入框从来没丢过焦点。

如果追求极致，你还可以给红色div加tabindex="-1"让它变成可聚焦元素，然后在点击时阻止它获取焦点，但其实完全没必要，上面的方案已经足够简洁好用了。

内容的提问来源于stack exchange，提问作者scriptfoo