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图片边框border-image的用法
Jun 30 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php创建无限级树型菜单
2015/11/05 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python制作最美应用的爬虫
2015/10/28 Python
python搭建微信公众平台
2016/02/09 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python修改FTP服务器上的文件名
2019/09/11 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
怎样声明接口
2014/09/19 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
2014年领班工作总结
2014/11/25 职场文书
个人年终总结怎么写
2015/03/09 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js