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 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python子类继承父类构造函数详解
2019/02/19 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
详解python运行三种方式
2019/05/13 Python
python读写csv文件的方法
2019/08/13 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
通过cmd进入python的步骤
2020/06/16 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
继承权公证书
2014/04/09 职场文书
综治宣传月活动总结
2014/04/28 职场文书
学校文明单位申报材料
2014/05/06 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
大学生十八大感想
2015/08/11 职场文书
文明礼貌主题班会
2015/08/14 职场文书
人事任命书范本
2015/09/21 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
Apache POI的基本使用详解
2021/11/07 Servers