HTML5 自动聚焦 autofocus 属性

最新推荐文章于 2025-03-10 10:46:53 发布

无语听梧桐

最新推荐文章于 2025-03-10 10:46:53 发布

阅读量7.1k

点赞数 5

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

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

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML5中的autofocus属性，包括其定义、使用方式及注意事项。当autofocus属性设置为true时，页面加载时将自动聚焦到指定控件，如input、textarea或button等。

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

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>