聚焦

不同于 HTML 文档中的其他元素，表单字段可以获取键盘焦点。当点击或以某种方式激活时，他们会成为激活的元素，并接受键盘的输入。

因此，只有获得焦点时，你才能输入文本字段。 其他字段对键盘事件的响应不同。 例如，<select>菜单尝试移动到包含用户输入文本的选项，并通过向上和向下移动其选项来响应箭头键。

我们可以通过使用 JavaScript 的focus和blur方法来控制聚焦。第一个会聚焦到某一个 DOM 元素，第二个则使其失焦。在document.activeElement中的值会关联到当前聚焦的元素。

  1. <input type="text">
  2. <script>
  3.   document.querySelector("input").focus();
  4.   console.log(document.activeElement.tagName);
  5.   // → INPUT
  6.   document.querySelector("input").blur();
  7.   console.log(document.activeElement.tagName);
  8.   // → BODY
  9. </script>

对于一些页面，用户希望立刻使用到一个表单字段。JavaScript 可以在页面载入完成时将焦点放到这些字段上，HTML 提供了autofocus属性，可以实现相同的效果，并让浏览器知道我们正在尝试实现的事情。这向浏览器提供了选项，来禁用一些错误的操作，例如用户希望将焦点置于其他地方。

浏览器也允许用户通过 TAB 键来切换焦点。通过tabindex属性可以改变元素接受焦点的顺序。后面的例子会让焦点从文本输入框跳转到 OK 按钮而不是到帮助链接。

  1. <input type="text" tabindex=1> <a href=".">(help)</a>
  2. <button onclick="console.log('ok')" tabindex=2>OK</button>

默认情况下，多数的 HTML 元素不能拥有焦点。但是可以通过添加tabindex属性使任何元素可聚焦。tabindex为 -1 使 TAB 键跳过元素，即使它通常是可聚焦的。