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中各种颜色属性的使用教程
May 17 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
元素水平垂直居中的方式
Mar 31 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/05/12 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
文字自荐书范文
2014/02/10 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书