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 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
form自动提交实例讲解
2017/07/10 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的装饰器用法详解
2015/01/14 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
怎样让char类型的东西转换成int类型
2013/12/09 面试题
如何在存储过程中使用Loop
2016/01/05 面试题
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
数控专业应届生求职信
2013/11/27 职场文书
大学生如何写自荐信
2014/01/08 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python