欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5 自动聚焦(autofocus)属性使用介绍

程序员文章站 2023-11-17 15:01:16
一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成，感兴趣的朋友可以了解下... 13-08-07...

原文 ： html5 autofocus attribut
原文发布时间： 2012年08月27日
翻译时间： 2013年8月6日
html5 推出了一大堆精彩的东西给我们。
过去我们要用javascript和flash完成的任务，比如表单验证，输入框空白提示(input placeholders),客户端文件上传下载(),以及 音频/视频播放，现在都可以用基本的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>

上一篇： Canvas与Image互相转换示例代码

下一篇： asp.net DataGrid控件中弹出详细信息窗口

推荐阅读