聚焦HTML表单元素——将光标置于元素内以启用用户立即输入——是Web开发中的一个重要方面。此技术通过预选字段或引导用户顺利完成表单来显著改善用户体验。JavaScript提供了一种实现此目的的直接方法。
本指南详细介绍了如何在各种HTML表单元素上设置焦点，确保可访问性和稳健性。
目录
在输入元素上设置焦点
输入元素（文本字段、数字、电子邮件等）是最常见的表单元素。直接应用于元素的focus()方法设置焦点。
对于ID为“firstName”的输入字段：
<input type="text" id="firstName" placeholder="请输入您的名字">
使用此JavaScript：
document.getElementById("firstName").focus();
这通过ID选择元素并应用focus()。将此JavaScript放在<script>标签或链接的.js文件中。在页面加载时或响应用户操作（例如，按钮点击）时触发它。
带按钮的示例：
<input type="text" id="firstName" placeholder="请输入您的名字">
<button onclick="document.getElementById('firstName').focus();">聚焦到名字</button>
在文本区域元素上设置焦点
文本区域（用于多行文本输入）使用与输入字段相同的focus()方法。
<textarea id="message" placeholder="请输入您的留言"></textarea>
JavaScript：
document.getElementById("message").focus();
这将光标置于ID为“message”的文本区域内。
在选择元素上设置焦点
选择框（下拉列表）需要稍微细致的方法。虽然focus()有效，但光标位置可能并不完全直观。但是，focus()仍然是激活下拉列表以进行键盘导航的最佳方法。
<select id="country">
<option value="">选择国家/地区</option>
<option value="us">美国</option>
<option value="ca">加拿大</option>
</select>
JavaScript：
document.getElementById("country").focus();
这激活了选择框，可以使用箭头键或鼠标进行交互。
最佳实践和错误处理
可访问性：程序化焦点不应扰乱用户体验或违反可访问性指南。避免自动聚焦可能使用户困惑的元素。
错误处理：在调用focus()之前始终检查元素是否存在，以防止错误：
const element = document.getElementById("firstName");
if (element) {
element.focus();
} else {
console.error("找不到ID为'firstName'的元素。");
}
通过遵循这些指南，您可以有效且可访问地管理HTML表单元素上的焦点，从而增强用户交互。