HTML5 自动聚焦(autofocus)属性使用介绍


Posted in HTML / CSS onAugust 07, 2013

原文 : HTML5 autofocus Attribut
原文发布时间: 2012年08月27日
翻译时间: 2013年8月6日
HTML5 推出了一大堆精彩的东西给我们。
过去我们要用JavaScript和Flash完成的任务,比如表单验证,输入框空白提示(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/视频播放,现在都可以用基本的HTML来完成了。另一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成。
代码就如下面一样简单:

复制代码
代码如下:

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

当 autofocus 属性设置以后,input,textarea,以及button 元素在页面加载(load)以后,会被自动选中(即获得焦点). 我尝试其他元素(比如h1 标签),tabIndex=0的情况,但是autofocus属性在这些元素上根本没有效果。
这个属性在主要目的是获取用户输入的页面(pages whose main purpose is collecting information)是很有用的,比如google首页(99%的情况是用来搜索)或者在线安装向导(比如WordPress's installer).而且最关键在于——不需要JavaScript参与。
完整的页面代码如下:
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 autofocus属性测试 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="original=http://davidwalsh.name/autofocus">
</head>
<body>
<!-- 原则上,以下三个元素,只能有一个设置autofocus 属性,如果多个元素都设置,应该是最后一个元素获取了焦点 -->
<!--
-->
<div>
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 #HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 #HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 #HTML / CSS
使用HTML5拍照示例代码
Aug 06 #HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 #HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 #HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 #HTML / CSS
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
让您的菜单不离网站
2006/10/03 Javascript
菜单效果
2006/10/14 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
vue如何判断dom的class
2018/04/26 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python实现Linux监控的方法
2019/05/16 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
什么是TCP/IP
2014/07/27 面试题
自我评价范文分享
2014/01/04 职场文书
英语导游词
2015/02/13 职场文书
三八妇女节寄语
2015/02/27 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP