如何自动聚焦到表单的某个input标签（autofocus）

最新推荐文章于 2024-04-12 09:59:27 发布

WinstonLau

最新推荐文章于 2024-04-12 09:59:27 发布

阅读量9k

点赞数 2

分类专栏：前端文章标签： autofocus 自动聚焦

本文链接：https://blog.csdn.net/WinstonLau/article/details/88530253

版权

前端专栏收录该内容

59 篇文章

订阅专栏

本文介绍如何使用HTML的autofocus属性使表单加载时自动聚焦到特定的输入框，提高用户体验。实测在谷歌浏览器中，即使多个input标签使用autofocus属性，也只会聚焦于第一个标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以让表单显示出来的时候即聚焦于某个 input 元素，这样用户就能直接在其中输入数据而不必先动手选择它
要实现这种效果，我们需要用到 input 标签的 autofocus 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>autofocus</title>
</head>
<body>
    <form action="#">
        <p>
            <input type="text" autofocus>
        </p>
        <p>
            <input type="text">
        </p>
    </form>
</body>
</html>