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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 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(6) 面向对象
2010/02/16 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
TensorFlow变量管理详解
2018/03/10 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python __slots__的使用方法
2020/11/15 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
会计顶岗实习心得
2014/01/25 职场文书
出纳员的岗位职责
2014/02/22 职场文书
助理政工师申报材料
2014/06/03 职场文书
高考1977观后感
2015/06/04 职场文书
社区干部培训心得体会
2016/01/06 职场文书