HTML5 自动聚焦属性

原文： 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>

HTML5 自动聚焦属性相关推荐

HTML5 自动聚焦 autofocus 属性
HTML5 自动聚焦 autofocus 属性定义 autofocus 属性是一个布尔属性 autofocus 属性为 true 时,页面加载时自动聚焦到此控件支持 autofocus 属性的标签 ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
HTML5新增属性学习笔记
1.form属性表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. 1 <form id="testForm&quo ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
HTML5: 全局属性
出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添 ...
HTML5 全局属性
HTML5 全局属性了解HTML5新加入的内容,首先了解对于所有元素都适应的全局属性,一部分是HTML5新添加的属性,一部分是HTML5之前就已经存在的属性,至于是什么时候添加到HTML标准中,就不 ...
HTML5 autofocus属性用法简单介绍
本章节简单介绍一下HTML5中新增的一个属性autofocus,它可以让一个元素加载后获取焦点,在此之前一般要通过使用javascript的focus()方法实现我们的要求,非常的简单,代码如下: 1 ...
tabindex 属性 html5洗属性规定当使用 “tab“ 键进行导航时元素的顺序。
tabindex 属性 html5洗属性规定当使用 "tab" 键进行导航时元素的顺序. 定义和用法 tabindex 属性规定当使用 "tab" 键进行导 ...

HTML5 自动聚焦属性

HTML5 自动聚焦属性相关推荐

最新文章

热门文章

HTML5 自动聚焦 属性

HTML5 自动聚焦 属性相关推荐

最新文章

热门文章

HTML5 自动聚焦属性

HTML5 自动聚焦属性相关推荐