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 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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中的多种序列化
2016/08/28 PHP
jquery 指南/入门基础
2007/11/30 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
探索Vue高阶组件的使用
2018/01/08 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python实现分段线性插值
2018/12/17 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
人力资源专员岗位职责
2014/01/30 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android