HTML5 自动聚焦 autofocus 属性

最新推荐文章于 2024-04-02 16:56:29 发布

无语听梧桐

最新推荐文章于 2024-04-02 16:56:29 发布

阅读量6.5k

点赞数 5

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_36894745/article/details/114646045

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5 自动聚焦 autofocus 属性

定义

autofocus 属性是一个布尔属性
autofocus 属性为 true 时，页面加载时自动聚焦到此控件
支持 autofocus 属性的标签有 input、textarea、button

使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>autofocus的使用</title>
    </head>
    <body>
        <div align="center">文本内容回居中显示，因为元素上面的设置了</div>
        <div class="div">我是一个很高的地址</div>
        <button autofocus>我有自动聚集功能，加载到这里</button>
        <style>
            .div {
                height: 2000px;
            }
            div {
                border: 1px red solid;
            }
        </style>
    </body>
</html>

点击我查看 demo 效果

如果一个页面中有多个表单元素设置了 autofocus 呢

经测试验证会聚焦到第一个设置 autofocus 为 true 的元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>autofocus的使用</title>
    </head>
    <body>
        <button autofocus>我是第一个自动聚焦的按钮</button>
        <div align="center">文本内容回居中显示，因为元素上面的设置了</div>
        <div class="div">我是一个很高的地址</div>
        <button autofocus>我有自动聚集功能，加载到这里</button>
        <style>
            .div {
                height: 2000px;
            }
            div {
                border: 1px red solid;
            }
        </style>
    </body>
</html>

注意 ⚠️：给 div、h1 等纯显示元素设置 autofocus 没有效果。

应用场景

谷歌、百度等搜索页面，页面一旦加载，光标就定位在输入框里。

无语听梧桐

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
HTML5 自动聚焦 autofocus 属性

HTML5 自动聚焦 autofocus 属性定义autofocus 属性是一个布尔属性autofocus 属性为 true 时，页面加载时自动聚焦到此控件支持 autofocus 属性的标签有 input、textarea、button使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vie
复制链接

扫一扫