使用 JavaScript 将焦点设置到 HTML 表单元素

在 web 开发中，经常需要在页面加载完毕后将焦点自动设置到某个表单元素上，以方便用户快速输入。通过 JavaScript 可以轻松地实现这个功能。

手动设置焦点

可以通过 JavaScript 的 focus() 方法将焦点手动设置到指定的表单元素上。例如，要将焦点设置到名为 username 的文本框上，可以这样写：

document.getElementById('username').focus();

以上代码将找到页面中 id 为 username 的元素，并设置焦点到该元素上。

页面加载后自动设置焦点

要确保页面加载完毕后自动设置焦点，可以将上述代码放在 window.onload 事件处理函数中，如下所示：

window.onload = function() {
  document.getElementById('username').focus();
};

以上代码在页面加载完毕后，将自动设置焦点到 id 为 username 的元素上。

优化：自动查找第一个可聚焦元素

为了提高页面访问的易用性，可以进一步优化上述代码，从而实现自动查找页面中第一个可聚焦的表单元素，并自动将焦点设置到该元素上。优化后的代码如下所示：

window.onload = function() {
  var elements = document.forms[0].elements;
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var type = element.type.toLowerCase();
    if (element.tabIndex >= 0 && element.disabled === false &&
        ['input', 'select', 'textarea', 'button'].indexOf(type) >= 0) {
      element.focus();
      break;
    }
  }
};

以上代码首先获取了页面中第一个表单元素，并遍历所有可聚焦的表单元素，找到第一个可聚焦元素并将焦点设置到该元素上。

总结

通过 JavaScript 将焦点设置到 HTML 表单元素上，可以提高页面的易用性，让用户更加轻松地输入信息。我们可以手动设置焦点，也可以自动查找第一个可聚焦的表单元素，并自动将焦点设置到该元素上。