为何打开一个页面就自动定位到搜索框呢
今天客户问为什么他一打开页面就跳到了底部搜索框呢?这样对用户很不友好。ytkah查看了一下确实是这样,而且光标是在跳动,表示输入的状态,这个应该跟哪个属性设置有关系,查看源代码发现input输入框中加了一个autofocus属性,只要把这个属性去掉即可
这个是搜索框的源代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | <form action= "{{ routes.search_url }}" name= "GET" role= "search" > <div class = "search" > <input type= "search" name= "q" autocomplete= "off" autocorrect= "off" autocapitalize= "off" autofocus> <input type= "hidden" name= "type" value= "product" > <button type= "submit" > <svg xmlns= "http://www.w3.org/2000/svg" width= "24" height= "24" viewBox= "0 0 24 24" fill= "none" stroke= "#e11b22" stroke-width= "1" stroke-linecap= "butt" stroke-linejoin= "round" > <circle cx= "11" cy= "11" r= "8" ></circle> <line x1= "21" y1= "21" x2= "16.65" y2= "16.65" ></line> </svg> </button> </div> </form> |
把search的autofocus去掉变为<input type="search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off">
科普一下autofocus:设置输入字段在页面加载时自动获得焦点,
定义和用法
autofocus 属性是一个布尔属性。
autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
HTML 4.01 与 HTML5之间的差异
autofocus 属性是 HTML5 中的新属性。
HTML 与 XHTML 之间的差异
在 XHTML 中,禁止属性最小化,autofocus 属性必须定义为 <input autofocus="autofocus" />。
语法
<input autofocus>

加微信交流
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架