如何仅用HTML让非input元素自动聚焦？h4标签autofocus失效求助

问题原因 #

h4属于纯文本块级元素，默认不具备可聚焦能力，浏览器的autofocus属性仅对表单控件（如input、button）、链接或设置了tabindex的元素生效，所以直接给h4加autofocus不会起作用。

解决方案 #

方案1：给h4添加tabindex属性

通过设置tabindex="-1"让h4成为可聚焦元素，同时保留autofocus，页面加载后会自动聚焦并滚动到该元素：

<body>
  <h1>text 1</h1>
  <p>lorem1000</p>
  <h2>text 1</h2>
  <p>lorem1000</p>
  <h3>text 1</h3>
  <p>lorem1000</p>
  <h4 name="focushere" tabindex="-1" autofocus>text 1</h4>
  <p>lorem1000</p>
</body>

• tabindex="-1"表示元素可通过代码或autofocus聚焦，但不会被Tab键导航到，避免干扰正常页面交互。

方案2：用JavaScript强制滚动/聚焦

如果需要更灵活的控制（比如平滑滚动、不需要焦点样式），可以用JS实现：

<body>
  <h1>text 1</h1>
  <p>lorem1000</p>
  <h2>text 1</h2>
  <p>lorem1000</p>
  <h3>text 1</h3>
  <p>lorem1000</p>
  <h4 name="focushere" id="focushere">text 1</h4>
  <p>lorem1000</p>

  <script>
    // 页面完全加载后执行
    window.addEventListener('load', () => {
      const targetEl = document.getElementById('focushere');
      // 方法1：聚焦元素（需要先设置tabindex）
      targetEl.setAttribute('tabindex', '-1');
      targetEl.focus();
      // 如果不需要焦点轮廓，可加CSS：#focushere:focus { outline: none; }

      // 方法2：仅滚动到元素位置，不需要聚焦
      // targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  </script>
</body>

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