如何确保表单加载时无输入框自动获得焦点？

我明白你的需求啦——就是不想让页面加载时第一个输入框自动获得焦点，对吧？这其实是浏览器的默认行为（会自动聚焦页面中第一个可交互的表单元素），不过咱们有几种简单的办法可以搞定它！

方案1：纯HTML实现（无需JS） #

我们可以在表单最前面加一个隐藏的可聚焦输入框，让浏览器默认聚焦这个看不见的元素，这样就不会影响到可见的输入框了。修改后的代码如下：

<!DOCTYPE html>
<html>
<body>
<form>
  <!-- 隐藏的输入框，用来接收默认焦点 -->
  <input 
    type="text" 
    style="position:absolute; opacity:0; pointer-events:none;" 
    tabindex="0"
  >
  First name: <input type="text" name="fname">
  Last name: <input type="text" name="lname">
</form>
</body>
</html>

这里的关键设置：

• position:absolute; opacity:0：让输入框完全隐藏，不会占用页面空间
• pointer-events:none：防止用户不小心点击到这个隐藏元素
• tabindex="0"：确保这个元素可以被浏览器默认聚焦

方案2：用JavaScript主动移除焦点 #

如果更倾向于用JS控制，可以在页面加载完成后，找到当前聚焦的元素并让它失去焦点。代码示例：

<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
</form>

<script>
// 页面加载完成后执行
window.addEventListener('load', function() {
  // 用setTimeout确保浏览器已经完成默认聚焦操作
  setTimeout(() => {
    if (document.activeElement) {
      document.activeElement.blur();
    }
  }, 0);
});
</script>
</body>
</html>

这里用setTimeout是因为浏览器的默认聚焦操作可能会在页面load事件之后才完成，延迟0秒（其实是放到事件循环下一轮执行）能确保我们准确捕获到已经聚焦的元素，再调用blur()让它失去焦点。

两种方案都能达到你想要的效果，你可以根据自己的项目需求选择～

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