HTML5中的autofocus(自动聚焦)属性介绍


Posted in HTML / CSS onApril 23, 2014

这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。

HTML代码非常简单:

复制代码
代码如下:

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

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

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

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python求众数问题实例
2014/09/26 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python全局变量引用与修改过程解析
2020/01/07 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Lucene推荐的分页方式是什么?
2015/12/07 面试题
毕业自我评价范文
2013/11/17 职场文书
带薪年假请假条
2014/02/04 职场文书
活动总结报告范文
2014/05/04 职场文书
财务人员担保书
2014/05/13 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
涨价通知
2015/04/23 职场文书
2019广播稿怎么写
2019/04/17 职场文书