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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python判断设备是否联网的方法
2018/06/29 Python
python实现抖音点赞功能
2019/04/07 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
大学生个人事迹材料
2014/01/21 职场文书
护理学专业求职信
2014/06/29 职场文书
幼儿园感谢信
2015/01/21 职场文书
稽核岗位职责
2015/02/10 职场文书
投资合作意向书范本
2015/05/08 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Python中字符串对象语法分享
2022/02/24 Python
Golang入门之计时器
2022/05/04 Golang
HttpClient实现表单提交上传文件
2022/08/14 Java/Android