要让光标在页面加载时自动聚焦到第一个 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() 方法可以处理异步加载的情况. 选择哪种方法取决于你的具体需求和场景。 同时，也要注意用户体验，避免过度使用自动聚焦。