简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > H5 Tutorial > body text

HTML5 自动聚焦(autofocus)属性使用介绍_html5教程技巧

WBOY
Release： 2016-05-16 15:49:10
Original
2718 people have browsed it

原文 ： HTML5 autofocus Attribut
原文发布时间： 2012年08月27日
翻译时间： 2013年8月6日
HTML5 推出了一大堆精彩的东西给我们。
过去我们要用JavaScript和Flash完成的任务，比如表单验证，输入框空白提示(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/视频播放，现在都可以用基本的HTML来完成了。另一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成。
代码就如下面一样简单：

复制代码
代码如下:






当 autofocus 属性设置以后，input，textarea,以及button 元素在页面加载(load)以后，会被自动选中(即获得焦点). 我尝试其他元素(比如h1 标签)，tabIndex=0的情况，但是autofocus属性在这些元素上根本没有效果。
这个属性在主要目的是获取用户输入的页面(pages whose main purpose is collecting information)是很有用的，比如google首页(99%的情况是用来搜索)或者在线安装向导(比如WordPress's installer).而且最关键在于——不需要JavaScript参与。
完整的页面代码如下：

复制代码
代码如下:




HTML5 autofocus属性测试














Related labels：
html5
source：php.cn
Previous article：HTML5注册表单的自动聚焦与占位文本示例代码_html5教程技巧 Next article：html5文字阴影效果text-shadow使用示例_html5教程技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
How to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript. <inputid="edName&qu...
From 2023-10-13 08:52:25
0
2
317
Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
From 2023-09-12 12:20:33
0
1
280
HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it<!DO...
From 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
From 2023-09-09 20:06:48
0
1
362
Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
From 2023-09-06 12:15:38
0
1
240
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！