概述
autofocus 属性是 HTML <textarea> 元素的一个布尔属性。当页面加载时，带有 autofocus 属性的 <textarea> 元素会自动获得焦点。这意味着光标会出现在该文本区域中，用户可以立即开始输入文本，而无需手动点击该元素。
使用场景
autofocus 属性通常用于需要快速输入的表单或应用中。例如，在登录表单中，如果用户经常使用相同的用户名登录，那么将 autofocus 属性添加到用户名输入框可以使用户体验更加流畅。类似的，在一个需要快速响应的应用中，比如聊天应用，将 autofocus 属性添加到消息输入框可以让用户更快地开始输入信息。
语法
<textarea autofocus></textarea>
这里，autofocus 是一个布尔属性。布尔属性意味着它只需要存在于元素中即可生效，而不需要赋予任何值。
注意事项
- 唯一性: 在同一个页面中，
autofocus属性只能应用于一个元素。如果多个元素都设置了autofocus属性，浏览器只会在页面加载时聚焦于第一个出现的元素。 - 可访问性: 虽然
autofocus可以提升某些用户的体验，但它也可能对一些用户造成困扰，特别是那些依赖键盘导航或屏幕阅读器的用户。因此，在使用autofocus时，应该考虑所有用户的需求。 - 兼容性:
autofocus属性在现代浏览器中得到了广泛支持，但为了确保最佳的兼容性，建议在使用时进行测试。
示例
下面是一个简单的示例，展示了如何使用 autofocus 属性：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- --------- ----------
-------
------
----- ---------------- --------------
------ ------------------------------
--------- ------------ -------------- -------- --------- -----------------------------
------ ------------- -----------
-------
-------
-------在这个例子中，当页面加载时，消息输入框会自动获取焦点，用户可以直接开始输入信息。
与 JavaScript 的结合使用
虽然 autofocus 属性可以独立工作，但在某些情况下，可能需要通过 JavaScript 来控制焦点。例如，你可能希望在页面加载后的一段时间才设置焦点，或者在特定事件触发时才设置焦点。这可以通过 JavaScript 的 focus() 方法来实现：
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('message').focus();
});这个代码段会在文档完全加载后，将焦点设置到 ID 为 message 的 <textarea> 元素上。
通过结合 HTML 和 JavaScript 的功能，你可以更灵活地控制用户界面中的焦点行为，从而提供更好的用户体验。