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实现超炫风车特效
Nov 12 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python类定义和类继承详解
2015/05/08 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python微信公众号开发简单流程
2018/03/23 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
详解pandas赋值失败问题解决
2020/11/29 Python
仓库主管岗位职责
2014/03/02 职场文书
员工生日会策划方案
2014/06/14 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
教师暑期培训感言
2014/08/15 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers