HTML5中的autofocus(自动聚焦)属性介绍


Posted in HTML / CSS onApril 23, 2014

这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。

HTML代码非常简单:

复制代码
代码如下:

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

当有了autofocus属性,这些 INPUT, TEXTAREA, 或 BUTTON元素都能在页面加载是被选中。但如果使用纯显示元素,例如H1标记,autofocus属性并不好用。

这个属性在某些情况下非常有用。例如谷歌的首页,人们99%的时间都是用它来搜索,所以页面一旦加载,光标必然定位在输入框里。以前需要使用JavaScript才能完成,现在完全不需要了,html自己就能完成。

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
You might like
Banner程序
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP加密解密函数详解
2015/10/28 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python实现xlsx文件分析详解
2018/01/02 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python修改列表值问题解决方案
2020/03/06 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
房地产广告词大全
2014/03/19 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js