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 @keyframes简单动画实现
Feb 24 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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
2019十大人气国漫
2020/03/13 国漫
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
js canvas实现红包照片效果
2018/08/21 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
django中related_name的用法说明
2020/05/20 Python
python如何查看网页代码
2020/06/07 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
法人代表任命书范本
2014/06/05 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS