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

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

HTML代码非常简单:

Hi!

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

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

HTML5里的placeholder属性

...

HTML5 INPUT新增属性

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

HTML5新增的属性

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

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

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

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

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

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

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

HTML5: HTML5 表单属性

ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的

和 标签添加 ...

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

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

随机推荐

SQL连接操作符介绍(循环嵌套, 哈希匹配和合并连接)

今天我将介绍在SQLServer 中的三种连接操作符类型,分别是:循环嵌套.哈希匹配和合并连接.主要对这三种连接的不同.复杂度用范例的形式一一介绍. 本文中使用了示例数据库AdventureWorks ...

office 2013 产品秘钥

9RN4T-JPBQV-XQMC9-PM9FP-PGWP9 TKX7J-VDN26-Y2WKQ-7MG8R-X2CC9 N9M8X-QDKGK-W27Q6-2GQYT-TJC9K 4VNXV-F7PB ...

javascript中用setAttribute给元素添加colspan属性无效

先附上代码 var tr=document.createElement('TR'); var td=document.createElement('TD'); td.setAttribute('col ...

MD5摘要算法简析

1 MD5简介 1.1  概述 MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主 ...

[k8s] 最简单的集群小案例-记录本(tomcat+mysql)

启动一个简单的集群: tomcat+mysql myweb-pod.yaml apiVersion: v1 kind: Pod metadata: name: myweb labels: app: m ...

堆排序,图解,C/C++实现

body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

C#学习笔记(五):while循环和for循环

while循环 while循环和for循环,可以相互替换,范围和效能一样,理解事物的逻辑不一样 while循环用于条件不确定的逻辑 for循环用于计算次数的逻辑 for循环 快捷写法,按两下TAB i ...

python + docker, 实现天气数据 从FTP获取以及持久化(一)

前情提要 最近项目需要天气数据(预报和历史数据)来作为算法程序的输入. 项目的甲方已经购买了天气数据, 依照他们的约定,天气数据的供应商会将数据以"文本" (.TXT)的方式发到F ...

HDU6128 二次剩余/二次域求二次剩余解/LL快速乘法取模

LINK 题意:求满足模p下$\frac{1}{a_i+a_j}\equiv\frac{1}{a_i}+\frac{1}{a_j}$的对数,其中$n,p(1\leq n\leq10^5,2\leq p ...

mysq查询语句包含中文以及中文乱码,字符集 GBK、GB2312、UTF8的区别

一.查看mysql 字符集设置情况 使用Navicat for Mysql查看工具,打开命令列界面,输入show variables like '%char%';如下图,查看当前mysql字符集设置情 ...

html5表单属性自动获得焦点,HTML5里autofocus属性相关推荐

  1. html5 表单必填项,javascript - HTML5表单必填属性。 设置自定义验证消息?

    javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...

  2. html5表单新增的输入类型,HTML5之表单新增类型介绍

    1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...

  3. html5表单新功能解析,解析HTML5表单新功能-HTML5

    本文我们将详细介绍一下HTML 5中对表单功能的更新.希望能帮助更多的前端人学习这门毋庸置疑是新趋势的技术. 一.表单结构更自由 XHTML中需要放在form之中的诸如inpu/button/sele ...

  4. 表单输入框自动获得焦点自动获焦+一些实体字符

    自动获焦:autofocus,比如百度浏览器直接打卡,光标就在输入框内闪烁,这就是自动获焦. 但如果输入框不是网页的主要功能,就不要用自动获焦. 与后面的focus()方法来获得焦点相对比,自动获焦一 ...

  5. html5表单密码验证及提示,HTML5表单及其验证(示例代码)

    1.输入型控件 Input type 用途 说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值的输入域 属性 值 描述 max number 规定允许的最大值 min ...

  6. html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...

    每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...

  7. 【HTML5】Web前端——第三课:HTML5 表单相关元素和属性

    知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性 推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件 表单,是页 ...

  8. php form表单属性,HTML5 表单属性

    HTML5 表单属性 HTML5 中新的表单属性 HTML5 的 和 标签添加了几个新属性,如下所示:新属性: autocomplete novalidate 新属性: autocomplete au ...

  9. html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性

    新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...

最新文章

  1. Android UI:XML文件配置按钮等背景方案
  2. Azure Automation 自动化-自动关闭Azure
  3. Ajax-简单的HelloWorld实例,使用了XMLHttpRequest(two)
  4. 将Sql数据库中的表导出到指定文件
  5. MYSQL技术连环斩-MYSQL简述
  6. jsonpickle数据序列化
  7. POJ3264——Balanced Lineup(线段树)
  8. CodeDom六--实体类生成示例
  9. 不休息的工作都是浪费时间
  10. 硅谷谍战: Menlo Park某VC是CIA开的, 你们公司实习生可能是科技间谍…
  11. 学术论文检索--搜索引擎篇
  12. linux设备i2c优先级,Linux设备之I2C
  13. 硬件设计23之三极管开关原理与场效应管开关原理
  14. 修改进程的各种limits的方法
  15. 通过vdi备份linux,Linux_Ubuntu下VirtualBox的vdi文件克隆方法,使用VirtualBox时遇到一个问题, - phpStudy...
  16. Consider injecting the bean as one of its interfaces or forcing the use of CGLib-based proxies by se
  17. Android 知识点——Method put in org.json.JSONObject not mocked
  18. 蓝牙架构(4)—— 2 蓝牙系统架构 (2.0 核心系统架构)
  19. 手势识别:使用EfficientNet模型迁移、VGG16模型迁移
  20. ubuntu系统服务器网速测试方法

热门文章

  1. 使用Apache XML项目FOP生成PDF文件(上)
  2. vue打包npm run build
  3. Box2D v2.1.0用户手册翻译 - 第08章 关节(Joints)
  4. [转]Silverlight是什么
  5. 0x01 D-Link路由器漏洞研究分享
  6. PHP Web实时消息后台服务器推送技术---GoEasy
  7. elisa标准曲线怎么做_ELISA标准曲线的绘制方法
  8. 中南大学计算机学院余腊生老师,我校7位青年教师首获 “湖南省普通高校青年教师教学能手”称号...
  9. java(五)-迭代器,数据结构,List,Set ,TreeSet集合,Collections工具类
  10. unix系统操作系统_Unix操作系统| 第1部分