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 相关文章推荐
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 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写的serv-u的web申请账号的程序
2006/10/09 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
window.onload使用指南
2015/09/13 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
struct和class的区别
2015/11/20 面试题
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
安全生产警示教育活动总结
2015/05/09 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python