html5 button autofocus 属性介绍及应用


Posted in HTML / CSS onJanuary 04, 2013

在html 5中,可以设置当页面加载时,自动焦点到达某个控件中,这个就是autofocus属性了,如下:

复制代码
代码如下:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

浏览器支持该属性的有
fiefox 4+,safari 5+,chrome 6+,opera 11+,ie 10, 而android 2.3和safari mobile 5-都不支持

实例
当页面加载时,会获得焦点的一个按钮:

复制代码
代码如下:

<button type="button" autofocus="autofocus">
点击这里
</button>

亲自试一试
定义和用法
autofocus 属性规定当页面加载时按钮应当自动地获得焦点。

如果使用该属性,则按钮会获得焦点。
HTML 4.01 与 HTML 5 之间的差异
autoplay 属性是 HTML 5 中的新属性。
语法

复制代码
代码如下:

<button autofocus="autofocus">
HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
html5的新玩法——语音搜索
Jan 03 #HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 #HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python类的继承实例详解
2017/03/30 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
中专毕业自我鉴定
2013/10/16 职场文书
化工专业应届生求职信
2013/11/08 职场文书
财产公证书
2014/04/10 职场文书
消防安全主题班会
2015/08/12 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL