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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
js切换div css注意的细节
2012/12/10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
高职教师岗位职责
2013/12/24 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
毕业自我鉴定书
2014/03/24 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
新学期开学标语
2014/06/30 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Python如何将list中的string转换为int
2022/07/15 Ruby