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,js)
Dec 12 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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随机显示图片的简单示例
2014/02/15 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
js常用代码段整理
2011/11/30 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Python3.9新特性详解
2020/10/10 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
股权投资意向书
2014/04/01 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL