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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 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 缓冲的免费实现方法
2006/10/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
原生JS轮播图插件
2017/02/09 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python爬取抖音视频的实例分析
2021/01/19 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
如何选择使用结构还是类
2014/05/30 面试题
高中语文教学反思
2014/01/16 职场文书
大学生旷课检讨书
2014/01/22 职场文书
统计系教授推荐信
2014/02/28 职场文书
后勤主管岗位职责
2014/03/01 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL