HTML5里autofocus自动聚焦属性使用介绍


Posted in HTML / CSS onJune 22, 2016

HTML5给我们带来了一大堆神奇的东西。以前需要用JavaScript和Flash完成的任务,例如表单校验,INPUT placeholders , 客户端重命名下载文件和音频/视频,这些都可以使用基本的HTML完成。这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。

HTML代码非常简单:

XML/HTML Code复制内容到剪贴板
  1. <!-- These all work! -->  
  2. <input autofocus="autofocus" />  
  3. <button autofocus="autofocus">Hi!</button>  
  4. <textarea autofocus="autofocus"></textarea>  

当有了autofocus属性,这些 INPUT, TEXTAREA, 或 BUTTON元素都能在页面加载是被选中。但如果使用纯显示元素,例如H1标记,autofocus属性并不好用。

这个属性在某些情况下非常有用。例如谷歌的首页,人们99%的时间都是用它来搜索,所以页面一旦加载,光标必然定位在输入框里。以前需要使用JavaScript才能完成,现在完全不需要了,html自己就能完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
HTML / CSS 相关文章推荐
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
HTML5 placeholder属性详解
Jun 22 #HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 #HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 #HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 #HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 #HTML / CSS
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP函数utf8转gb2312编码
2006/12/21 PHP
完美解决PHP中文乱码
2009/11/26 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
键盘控制事件应用教程大全
2006/11/24 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
Python 通配符删除文件的实例
2018/04/24 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
django缓存配置的几种方法详解
2018/07/16 Python
python使用matplotlib绘制热图
2018/11/07 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python 中@property的用法详解
2020/01/15 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
秋游活动策划方案
2014/02/16 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫