《超实用的HTML代码段》阅读笔记1—

在页面加载完成后自动将输入焦点定位到需要的元素，用户就可以直接在改元素中进行输入而不需要手动选择它。

通过autofocus的属性就可以指定这种自动聚焦的功能，示例代码如下：

<form name="input" action="html_form_action.php" method="post"><div class="login-item"><label for="nick">姓名：<input autofocus id="nick" name="nick"/></label></div><div class="login-item"><label for="password">密码：<input id="password" name="password"/></label></div><div class="login-submit"><button type="submit">提交</button></div>
</form>

当autofocus属性设置以后，input、textarea以及button元素在页面加载（load）完成之后，会被自动选中（即获得焦点）。如果尝试其他元素非表单元素（如h2元素），tabIndex=0的情况，但是autofocus属性在这些元素上没有效果。

这个属性在主要目的是获取用户输入的页面是很有用的，例如搜索首页（图10.2），主要用于引导用户进行搜索，并且可以不是额外脚本实现。

图10.2 自动聚焦

autofocus属性只能用于设置一个元素上，如果多个元素都设置了autofocus属性，那么将会是最后一个元素获取了焦点。

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

　　摘自《超实用的HTML代码段》，涵盖HTML和HTML 5的400段代码。

转载于:https://www.cnblogs.com/book2006/p/5198714.html

《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦相关推荐

onvif学习笔记7：一个C++封装的onvif代码的阅读笔记
在前面的文章<onvif学习笔记4:Windows环境使用gsoap生成onvif框架代码>.<onvif学习笔记5:onvif框架代码初步了解>中,我们了解了如何生成不同的版 ...
《梦断代码》阅读笔记01
这几天阅读了老师推荐的<梦断代码>前几章,通过本书简介可以知道本书大概主要讲的是做软件过程中的困难. 第一章软件时间,主要讲的是从事软件制作行业的艰辛,需要没日没夜的加班工作,书中有这样一 ...
《梦断代码》阅读笔记02
在第四章<乐高王国>中,有一段是Chandler的后台工作陷入了作出艰难技术决定的迷宫,而麦卡斯科猛然间发现自己正深处迷宫中央.麦卡斯科曾经在自己的"树龙"blog中记 ...
《梦断代码》阅读笔记之第8章至最后
以下是我读了梦断代码第八章之后的读书笔记: 1.自己做的软件自己一定要用,即"吃你自己的狗食",自己的软件开发出来后自己都不会用那么还要指望别人用不成? 2.在软件开发编写代码的时 ...
代码大全阅读笔记02
第二部分:创建高质量的代码第一部分主要介绍了开发过程和需求分析,强调了构建的重要性,可以说十介绍了技术层面的一些东西.第二部分把目光放到了更加细节的地方,也开始看到了一些代码.内容十分全面,也写了很 ...
《梦断代码》阅读笔记Ⅱ
读"乐高王国"的时候,真的引起了我的共鸣.因为以前我就是作者描述的那种程序猿,专注于制造螺丝和螺母这种小细节,而不屑于利用别人早就写出来不知多少个版本的代码.之前同学一些程序的核心 ...
代码大全阅读笔记01
软件开发过程中的不同活动:定义问题.需求分析.规划构造.软件架构(或高层设计).详细设计. 编程与调试.单元调试.集成测试.集成.系统测试.保障测试.构建活动主要是编码与调试,但也有其他的活动. 构 ...
[置顶] Linux协议栈代码阅读笔记（一）
Linux协议栈代码阅读笔记(一) (基于linux-2.6.21.7) (一)用户态通过诸如下面的C库函数访问协议栈服务 int socket(int domain, int type, int p ...
代码分析：NASM源码阅读笔记
NASM源码阅读笔记 NASM(Netwide Assembler)的使用文档和代码间的注释相当齐全,这给阅读源码提供了很大的方便.按作者的说法,这是一个模块化的,可重用的x86汇编器, 而且能够被 ...
linux 协议栈位置,[置顶] Linux协议栈代码阅读笔记（一）
Linux协议栈代码阅读笔记(一) (基于linux-2.6.21.7) (一)用户态通过诸如下面的C库函数访问协议栈服务 int socket(int domain, int type, int p ...

《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦

《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦相关推荐

最新文章

热门文章