HTML5 自动聚焦autofocus属性
来源:互联网 发布:动态桌面壁纸软件下载 编辑:程序博客网 时间:2024/05/17 03:49
原文:https://davidwalsh.name/autofocus
翻译:http://blog.csdn.net/renfufei/article/details/9797419
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>
阅读全文
0 0
- HTML5 自动聚焦autofocus属性
- HTML5 自动聚焦 属性
- HTML5 自动聚焦 属性
- HTML5----autofocus属性
- html5 autofocus属性
- HTML5 autofocus属性
- HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)
- html5 autofocus form formaction 新属性 例子
- html5 autofocus
- 深度揭秘android摄像头的autoFocus-----循环自动聚焦的实现(Android Camera AutoFocus on Demand)
- 深度揭秘android摄像头的autoFocus-----循环自动聚焦的实现(Android Camera AutoFocus on Demand)
- 深度揭秘android摄像头的autoFocus-----循环自动聚焦的实现(Android Camera AutoFocus on Demand)
- HTML5 - 使用autofocus让控件自动获取焦点
- HTML <input> autofocus 属性
- html 5的autofocus属性
- 什么是自动聚焦!
- 自动聚焦,选中文本
- android摄像机自动聚焦
- 踩坑:App上传GooglePlay后Google登录和FaceBook登录异常
- 微信小程序设计weui框架
- BigDecimal.setScale 处理java小数点
- 搭建nginx服务与并支持域名绑定与https
- 第五周 项目1
- HTML5 自动聚焦autofocus属性
- springmvc源码分析----入门看springmvc的加载过程
- 第1086期AI100_机器学习日报(2017-09-08)
- laravel框架学习(一)安装laravel,及laravel-ide-helper增强代码提示
- 第七周 【项目4
- NOIP-2009 最优贸易
- 我与网易云音乐 之 【壹】凿壁借光
- 第1087期AI100_机器学习日报(2017-09-09)
- Dagger2