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中一些@规则的用法小结
Mar 09 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php文件操作相关类实例
2015/06/18 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
node.js入门教程
2014/06/01 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python实现的计算器功能示例
2018/04/26 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python中图像通道分离与合并实例
2020/01/17 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
网络教育自我鉴定
2013/11/01 职场文书
岗位聘任书范文
2014/03/29 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
北京爱情故事观后感
2015/06/12 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python