HTML | DOM Textarea 自动对焦属性

Textarea 是 HTML 中的一个表单元素，允许用户在其中输入多行文本。在某些情况下，需要自动对焦到该元素，提高用户体验。那么在 Textarea 中，如何设置自动对焦属性呢？

HTML 实现

在 HTML 中，可以使用 autofocus 属性来实现 Textarea 自动对焦。该属性可以作用于任何 HTML 表单元素，例如 Text、Checkbox、Radio、Select、Textarea 等。以下是一个自动对焦的 Textarea 示例：

<form>
  <label for="message">请输入消息：</label>
  <textarea id="message" name="message" rows="5" autofocus></textarea>
  <br>
  <input type="submit" value="提交">
</form>

在上述代码中，我们给 Textarea 添加了 autofocus 属性，该属性使得页面加载时自动将光标聚焦到该元素上。有了这个属性，用户打开页面之后就可以直接输入消息了，无需再手动点击 Textarea。

DOM 实现

在 DOM 中，可以通过 .focus() 方法来实现对指定元素的聚焦。以下是一个自动对焦的 Textarea 示例：

<form>
  <label for="message">请输入消息：</label>
  <textarea id="message" name="message" rows="5"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

<script>
window.onload = function() {
  var messageInput = document.getElementById('message');
  messageInput.focus(); // 自动对焦到 Textarea
}
</script>

在上述代码中，我们通过 document.getElementById('message') 获取了 Textarea 元素，并通过 .focus() 方法将光标聚焦到该元素上。由于该脚本是在页面加载完成后执行的，所以用户打开页面之后就可以直接输入消息了，无需再手动点击 Textarea。

总结

自动对焦可以提高用户的使用体验，在某些情况下非常有用。由于不同浏览器对自动对焦的支持程度不尽相同，因此建议对于重要的页面元素仍采用 JavaScript 实现。