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实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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分页函数完整实例代码
2014/09/22 PHP
php中socket的用法详解
2014/10/24 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
PyMongo安装使用笔记
2015/04/27 Python
Python中http请求方法库汇总
2016/01/06 Python
python配置grpc环境
2019/01/01 Python
python 内置模块详解
2019/01/01 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
毕业设计说明书
2014/05/07 职场文书
焦裕禄观后感
2015/06/03 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
开业庆典致辞
2015/08/01 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python