转载: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. 在Android Studio中使用BaiduMap SDK实时获取当地位置信息

    配置BaiduMap 环境 1.在百度API中新建自己的一个APP包名和APP名需要注意和自己Android Studio 中的包名和APP名保持一致: 2.百度地图中还需要填写一个SHA1 数字签名 ...

  2. jquery api调用

    本框架内置组件以及部分插件都可以通过jquery选择器进行API调用,支持链式操作,如下示例. <script type="text/javascript"> $(&q ...

  3. 图解Nosql(hbase)与传统数据库的区别

    图解Nosql(hbase)与传统数据库的区别http://www.aboutyun.com/thread-7804-1-1.html(出处: about云开发) 问题导读:1.nosql数据库能否删 ...

  4. SharePoint 2013 Nintex Workflow 工作流帮助(七)

    博客地址 http://blog.csdn.net/foxdave 工作流动作 11. Check out item(Libraries and lists分组) 与上一个对应,用于签出条目.如果一个 ...

  5. Linux内核-链表

    linux内核链表的定义(定义了双向链表,不含数据域) 定义在 /linux-source-3.13.0/include/linux/types.h 头文件中. struct list_head { ...

  6. jQuery 常用动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. js回调函数

    自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是 ...

  8. 重拾java系列一java基础(4)

    本章主要回顾一些类的相关知识: (1)static: static 静态的: 属于类的资源, 使用类名访问.  静态属性: 只有一份的变量  静态方法: 是属于类方法, 可以使用类名直接访问. 静态方 ...

  9. USB peripherals can turn against their users

    Turning USB peripherals into BadUSB USB devices are connected to – and in many cases even built into ...

  10. Git 的安装和创建版本库 。

    Git 的优点就不再多说了 .直接进入正题吧 . 安装Git 首先可以尝试输入 Git 看看有没有反映 . $ git The program 'git' is currently not insta ...