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 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
详解CSS不受控制的position fixed
May 25 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
ajax实现无刷新分页(php)
2010/07/18 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
使用console进行性能测试
2015/04/27 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
浅析vue数据绑定
2017/01/17 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python如何将多个PDF进行合并
2019/08/13 Python
python 错误处理 assert详解
2020/04/20 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Hammitt官网:设计师手袋
2020/05/23 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
新课培训心得体会
2014/09/03 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
环保主题班会教案
2015/08/13 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python