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

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

WinstonLau

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

阅读量8.5k

点赞数 2

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

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

版权

前端专栏收录该内容

59 篇文章 11 订阅

订阅专栏

我们可以让表单显示出来的时候即聚焦于某个 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>

效果图如下：
在这里插入图片描述

实测如果两个 input 标签都使用了 autofocus 属性，在谷歌浏览器中，鼠标仍会聚焦于第一个 input 标签

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WinstonLau

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何自动聚焦到表单的某个input标签（autofocus）

我们可以让表单显示出来的时候即聚焦于某个 input 元素，这样用户就能直接在其中输入数据而不必先动手选择它要实现这种效果，我们需要用到 input 标签的 autofocus 属性&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
复制链接

扫一扫