转载:http://www.webhek.com/html5-autofocus/

HTML5给我们带来了一大堆神奇的东西。以前需要用JavaScript和Flash完成的任务,例如表单校验,INPUT placeholders客户端重命名下载文件和音频/视频,这些都可以使用基本的HTML完成。这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。

HTML代码非常简单:

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

当有了autofocus属性,这些 INPUTTEXTAREA, 或 BUTTON元素都能在页面加载是被选中。但如果使用纯显示元素,例如H1标记,autofocus属性并不好用。

这个属性在某些情况下非常有用。例如谷歌的首页,人们99%的时间都是用它来搜索,所以页面一旦加载,光标必然定位在输入框里。以前需要使用JavaScript才能完成,现在完全不需要了,html自己就能完成。

HTML5里autofocus属性的更多相关文章

  1. HTML5里的placeholder属性

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5 INPUT新增属性

    HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...

  3. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

  4. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  5. 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

    转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...

  6. html5的float属性超详解(display,position, float)(文本流)

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  7. HTML5: HTML5 表单属性

    ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...

  8. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  9. 在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be closed first”

    在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be ...

随机推荐

  1. 【转发】Linux系统下安装rz/sz命令及使用说明

    对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...

  2. 2799元的HTC One时尚版要卖疯了

    俗话说“好人有好报”,这句话同样可以应用到手机上.本月初,HTC正式公布了HTC One时尚版的售价,裸机2799元,礼包价2999元(配智能立显保护套).该价格一出,立刻引来一片哗然.因为大家都不相 ...

  3. Windows Server 2012 R2 设置

    一.任务栏左下角启动服务器管理器,然后进行设置.1.登录不显示服务器管理器 2.本地服务器,看到右边的IE增强的安全配置,如图所示,关闭两项内容.这样就关闭了IE增强安全提示框. 3.“工具”菜单,启 ...

  4. Android类参考---Fragment

    Android类参考---Fragment public final boolean isAdded() 如果该Fragment对象被添加到了它的Activity中,那么它返回true,否则返回fal ...

  5. PED结构获取进程路径和命令行地址

    1.FS寄存器 2.进入FS寄存器地址,7FFDD000 3.偏移30为PED结构 4.偏移地址10 3C,44偏移:路径地址,命令行地址 // 通过PEB结构去查找所有进程模块 void *PEB ...

  6. hdu 2047

    PS:又是上课偷懒..去递推.. 代码: #include "stdio.h"#include "math.h"long long dp[55];long lo ...

  7. OkHttp+Stetho+Chrome调试android网络部分

    如果要达到上面的效果,你需要改造你的网络请求模块,使用Chrome浏览器和android程序之间的中间件来连接,这就是本篇要介绍的主题:OkHttp+Stetho+Chrome进行网络调试. okht ...

  8. yii2 数据验证

    控制器层 <?php namespace frontend\controllers; use Yii; use frontend\models\FormsModel; use yii\web\U ...

  9. IO复用(Reactor模式和Preactor模式)——用epoll来提高服务器并发能力

    上篇线程/进程并发服务器中提到,提高服务器性能在IO层需要关注两个地方,一个是文件描述符处理,一个是线程调度. IO复用是什么?IO即Input/Output,在网络编程中,文件描述符就是一种IO操作 ...

  10. 【转】Web应用的组件化开发(二)

    原文转自:http://blog.jobbole.com/56170/ 管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程.从各种角度看 ...