zoukankan      html  css  js  c++  java
  • 为何打开一个页面就自动定位到搜索框呢

      今天客户问为什么他一打开页面就跳到了底部搜索框呢?这样对用户很不友好。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>

      

    请已赞赏了的朋友加我微信
  • 相关阅读:
    python写的百度贴吧相册下载
    C#的图片拼接
    删除目录下的所有".svn"文件
    centOS 6.5 yum升级 gcc4.8 然后又退回来4.4
    代理的分类简述特点
    GCC 特性整理
    纯C 实现 strpos substr strspilt str_trim
    编译putty 源码去掉 Are you sure you want to close this session? 提示
    OpenWrt tcpdump 抓包
    安卓 打飞机 app 开发 第一篇
  • 原文地址:https://www.cnblogs.com/ytkah/p/14366973.html
Copyright © 2011-2022 走看看