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制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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短址转换实现方法
2015/02/25 PHP
php简单的上传类分享
2016/05/15 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python显示生日是星期几的方法
2015/05/27 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python实现计算器功能
2019/10/31 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python中qutip用法示例详解
2020/10/02 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
几个SQL的面试题
2014/03/08 面试题
自我评价优秀范文分享
2013/11/30 职场文书
表彰先进的通报
2014/01/31 职场文书
益达广告词
2014/03/14 职场文书
企业授权委托书范本
2014/04/02 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL