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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
express框架下使用session的方法
2019/07/31 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
一文带你了解Python中的字符串是什么
2018/11/20 Python
用python做游戏的细节详解
2019/06/25 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
教师师德工作总结2015
2015/07/22 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电