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禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
Python内置函数dir详解
2015/04/14 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python网络编程详解
2017/10/31 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python中web框架的自定义创建
2019/09/08 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
校园达人秀策划书
2014/01/12 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python