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 相关文章推荐
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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
WHOIS类的修改版
2006/10/09 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python实现函数极小值
2019/07/10 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
中标通知书格式
2015/04/17 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书