HTML5里autofocus自动聚焦属性使用介绍


Posted in HTML / CSS onJune 22, 2016

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

HTML代码非常简单:

XML/HTML Code复制内容到剪贴板
  1. <!-- These all work! -->  
  2. <input autofocus="autofocus" />  
  3. <button autofocus="autofocus">Hi!</button>  
  4. <textarea autofocus="autofocus"></textarea>  

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5 placeholder属性详解
Jun 22 #HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 #HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 #HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 #HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 #HTML / CSS
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP异常处理Exception类
2015/12/11 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP goto语句用法实例
2019/08/06 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vue深入解析之render function code详解
2017/07/18 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python中类的属性和方法介绍
2018/11/27 Python
Python识别验证码的实现示例
2020/09/30 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
《难忘的泼水节》教学反思
2014/02/27 职场文书
质量月口号
2014/06/20 职场文书
矛盾论读书笔记
2015/06/29 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
无线电通信名词解释
2022/02/18 无线电
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
delete in子查询不走索引问题分析
2022/07/07 MySQL