进入编辑页面时，如何把光标聚焦到第一个input？

要让光标在页面加载时自动聚焦到第一个 input 元素，有很多方法，以下是几种常见且推荐的做法：

1. 使用 autofocus 属性 (HTML5)

这是最简单直接的方法。在第一个 <input> 元素中添加 autofocus 属性即可。浏览器加载页面后会自动将光标聚焦到该元素。

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

需要注意的是： 一个页面中只能有一个元素拥有 autofocus 属性。如果有多个元素都设置了 autofocus，浏览器通常会聚焦到页面中最后出现的那个。

2. 使用 JavaScript 的 focus() 方法

这种方法更加灵活，可以根据各种条件来控制聚焦。你可以在页面加载完成后，使用 JavaScript 获取第一个 input 元素，然后调用它的 focus() 方法。

<input type="text" id="firstInput">
<input type="text">

<script>
  window.onload = function() {
    document.getElementById('firstInput').focus();
  };
</script>

或者使用更现代的写法：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('input').focus(); // 选择第一个input元素
});

这种方法的优势在于你可以根据需要添加更复杂的逻辑，例如：

• 根据用户行为决定是否聚焦
• 在特定条件下聚焦到不同的 input 元素

3. 使用 JavaScript 的 setTimeout() 方法 (处理异步加载)

如果你的 input 元素是通过异步加载的方式添加到页面中的（例如 Ajax 或动态渲染），那么 window.onload 或 DOMContentLoaded 事件可能在 input 元素加载完成之前就触发了。在这种情况下，你需要使用 setTimeout() 方法来延迟执行 focus()，确保 input 元素已经存在于 DOM 中。

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const firstInput = document.querySelector('input');
    if (firstInput) {
      firstInput.focus();
    }
  }, 0); // 即使延迟时间为0，也能确保在DOM完全加载后执行
});

4. 考虑用户体验

虽然自动聚焦可以提高效率，但在某些情况下可能会让用户感到突兀。例如，如果用户正在浏览其他内容，突然跳到输入框可能会打断他们的思路。因此，需要根据具体场景谨慎使用自动聚焦功能。 例如，在登录页面或搜索页面中，自动聚焦通常是合理的；但在其他页面中，则需要根据具体情况进行考虑。

总结: autofocus 属性最简洁，JavaScript 的 focus() 方法更灵活，setTimeout() 方法可以处理异步加载的情况. 选择哪种方法取决于你的具体需求和场景。 同时，也要注意用户体验，避免过度使用自动聚焦。