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的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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的性能
2013/10/30 PHP
php基本函数汇总
2015/07/09 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP培训要多少钱
2017/06/06 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
extjs 为某个事件设置拦截器
2010/01/15 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python实现多线程的两种方式
2016/05/22 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
一些Unix笔试题和面试题
2013/01/22 面试题
商场促销活动总结
2014/07/10 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Python获取字典中某个key的value
2022/04/13 Python
python多次执行绘制条形图
2022/04/20 Python