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>

      

    请已赞赏了的朋友加我微信
  • 相关阅读:
    547. Friend Circles
    399. Evaluate Division
    684. Redundant Connection
    327. Count of Range Sum
    LeetCode 130 被围绕的区域
    LeetCode 696 计数二进制子串
    LeetCode 116 填充每个节点的下一个右侧节点
    LeetCode 101 对称二叉树
    LeetCode 111 二叉树最小深度
    LeetCode 59 螺旋矩阵II
  • 原文地址:https://www.cnblogs.com/ytkah/p/14366973.html
Copyright © 2011-2022 走看看