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动画(开启gpu加速)
Dec 23 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
html,css,javascript是怎样变成页面的
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
杏林同学录(七)
2006/10/09 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
简单易懂的python环境安装教程
2017/07/13 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python 中Operator模块的使用
2021/01/30 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
中秋节主持词
2014/04/02 职场文书
班组建设经验交流材料
2014/05/12 职场文书
关爱残疾人标语
2014/06/25 职场文书
推广普通话标语
2014/06/27 职场文书
支教个人总结
2015/03/04 职场文书
高中信息技术教学反思
2016/02/16 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python爬取某拍短视频
2021/06/11 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python