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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
python多进程共享变量
2016/04/06 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python要安装在哪个盘
2020/06/15 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
教育局长自荐信范文
2013/12/22 职场文书
超市促销活动总结
2014/07/01 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
2015年班干部工作总结
2015/04/29 职场文书
Python中常见的导入方式总结
2021/05/06 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers