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不透明度实例讲解
Apr 26 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
第十一节--重载
2006/11/16 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
Vuex提升学习篇
2018/01/11 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
PyQT实现多窗口切换
2018/04/20 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
体育之星事迹材料
2014/05/11 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
给学校的建议书400字
2015/09/14 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
python 提取html文本的方法
2021/05/20 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python