HTML5怎么用JS的focus()方法让input和textarea获取文本聚焦

来源：前端技术作者：新井头衔：网络博主

导读：本期聚焦于小伙伴创作的《HTML5怎么用JS的focus()方法让input和textarea获取文本聚焦》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《HTML5怎么用JS的focus()方法让input和textarea获取文本聚焦》有用，将其分享出去将是对创作者最好的鼓励。

在HTML5页面里，如果想用JavaScript让input或者textarea自动获得输入焦点，最直接的就是调用元素的focus()方法。这个方法属于DOM元素对象，只要能拿到对应的节点，就能在任何时候把它激活成可输入状态。

一、focus()方法的基本用法

先要在HTML里准备好输入框，然后通过document.getElementById或者querySelector找到它，再调用focus()。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>focus示例</title>
</head>
<body>
  <input type="text" id="username" placeholder="请输入用户名">
  <textarea id="content" rows="4"></textarea>

  <script>
    // 页面DOM加载完后让input获焦
    window.onload = function() {
      var input = document.getElementById('username');
      input.focus(); // 让input获取焦点

      var ta = document.getElementById('content');
      // ta.focus(); // 也可以让textarea获焦
    };
  </script>
</body>
</html>

二、为什么有时候focus()不生效

常见原因主要有两个：一是脚本在元素渲染前就执行了，这时候拿不到节点；二是元素被隐藏（比如display:none）时调用会无效。解决办法是把脚本放在body末尾，或者监听DOMContentLoaded事件。

document.addEventListener('DOMContentLoaded', function() {
  var el = document.querySelector('textarea');
  if (el && el.offsetParent !== null) {
    el.focus();
  }
});

三、结合事件触发聚焦

除了自动聚焦，也可以在用户点击按钮后把焦点移到某个框里。下面的例子点击按钮让textarea获焦：

<button id="btn">写评论</button>
<textarea id="comment"></textarea>
<script>
  document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('comment').focus();
  });
</script>

四、与autofocus属性的区别

HTML5的<input>和<textarea>支持autofocus属性，它只能在页面加载时自动聚一次，且整个页面只能有一个。而JS的focus()可以随时重复调用，控制更自由。

方式	触发时机	灵活性
autofocus属性	页面加载	低
JS focus()	任意时刻	高

五、小结

用JavaScript的focus()方法让input和textarea在HTML5页面里获焦非常简单。记住先确保DOM就绪、元素可见，再根据业务需要决定自动还是手动调用即可。

HTML5 JavaScript_focus input_textarea修改时间：2026-07-29 03:03:18

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。