在 web 开发中，经常会遇到需要在页面加载完成后自动聚焦到输入框的需求。这种需求可以通过使用autofocus属性来实现。autofocus属性可以让页面加载完成后自动将光标定位到指定的输入框上，这在提升用户体验和操作便利性方面非常有用。
使用方法
要在一个输入框上使用autofocus属性，只需要在该输入框的标签上添加autofocus属性即可，如下所示：
<input type="text" autofocus>
以上代码中，我们为一个文本输入框添加了autofocus属性，这样当页面加载完成后，光标就会自动定位到该输入框上，用户可以直接开始输入内容。
注意事项
只能用于一个输入框：每个页面只能有一个带有
autofocus属性的输入框，因为页面加载后只能有一个输入框被自动聚焦。不适用于隐藏元素：如果一个输入框是隐藏的（比如使用
display: none或visibility: hidden），那么autofocus属性不会生效，因为隐藏的元素无法接收焦点。兼容性问题：
autofocus属性在大多数现代浏览器中都能很好地支持，但在一些旧版本的浏览器中可能存在兼容性问题，需要谨慎使用。
示例代码
下面是一个简单的示例代码，演示了如何在一个搜索框上使用autofocus属性：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Search with Autofocus</title>
</head>
<body>
<h1>Search for something</h1>
<input type="text" autofocus>
</body>
</html>在这个示例中，页面加载完成后，光标会自动聚焦到搜索框上，用户可以直接输入搜索内容，提升了用户体验。
结论
autofocus属性是一个非常方便的功能，可以帮助用户在页面加载完成后直接开始输入内容，提升了用户体验和操作便利性。在实际开发中，我们可以根据具体需求合理地使用autofocus属性，但需要注意兼容性和使用限制。