《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦
2024-08-26 00:24:32
在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它。
通过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段代码。
最新文章
- 服务器文件上传下载(XShell+Xftp)
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
- MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型
- Javascript基础系列之(四)数据类型 (数组 array)
- 安装及破解IntelliJ IDEA15
- smb
- ERP联系人查询和修改(十六)
- Apache Commons DbUtils Problem
- XML配置silverlight ,wcf 解析xml
- hdu 1536 S-Nim_求sg值模版
- Spring相框
- BZOJ 3101: N皇后
- [luogu P3384] 【模板】树链剖分 [树链剖分]
- Microsoft .Net Remoting系列专题之三:Remoting事件处理全接触
- android 高仿京东
- RabbitMQ in Action (2): Running and administering Rabbit
- Maven(十三)Maven统一声明版本号
- Tomcat启动后,访问页面报404错误解决方法
- 唉,可爱的小朋友---(DFS)
- iOS 10 应用内跳转到系统设置
热门文章
- js 判断滚动条是不是在浏览器底部
- ubuntu 16.04 apt-get 出现The package &#39;xxx&#39; needs to be reinstalled, but I can&#39;t find an archive for it.
- css3单位em,rem,px,vw,vh等
- Linux命令行设置环境变量
- POI生成Excel工具类
- ORA-22992:没法使用从远程表选择的LOB定位器
- (未使用AOP)使用ThreadLocal对象把Connection和当前线程绑定, 从而使一个线程中只有一个能控制事务的对象
- CodeForces754D【贪心】
- LVS 负载均衡器总结
- MyBatist庖丁解牛(五)