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 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
Html5 滚动穿透的方法
May 13 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的ASP防火墙
2006/10/09 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
JS实现小米轮播图
2020/09/21 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
用pandas按列合并两个文件的实例
2018/04/12 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python 统计字数的思路详解
2018/05/08 Python
Python3.6简单反射操作示例
2018/06/14 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
医药工作岗位求职信分享
2013/12/31 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
环保建议书400字
2014/05/14 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书