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 29 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
numpy.where() 用法详解
2019/05/27 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python 防止死锁的方法
2020/07/29 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
如何清空Session
2015/02/23 面试题
研究生求职推荐信范文
2013/11/30 职场文书
保险公司演讲稿
2014/09/02 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
员工福利申请报告
2015/05/15 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python