为何打开一个页面就自动定位到搜索框呢
今天客户问为什么他一打开页面就跳到了底部搜索框呢？这样对用户很不友好。ytkah查看了一下确实是这样，而且光标是在跳动，表示输入的状态，这个应该跟哪个属性设置有关系，查看源代码发现input输入框中加了一个autofocus属性，只要把这个属性去掉即可
这个是搜索框的源代码
<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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-02-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读