bug之safari输入框

目录

• 前言
• 排查发
• 解决方案

前言

在开发中发现一个Safari才会有的bug，文本输入框中会显示密码框才有的钥匙图标🔑，图示如下：

排查发

当页面上有一个元素的文本包含登录/login，并且在其后面只有一个输入框，就可以复现

  <div>
    <span>登录</span>
    <input type="text" >
  </div>

位置相反就不会出现

  <div>
    <input type="text" >
    <span>登录</span>
  </div>

解决方案

1. 在登录字符中间加一个零宽字符

   <div>
     <span>登&#8203;录</span>
     <input type="text" >
   </div>
   

2. 在页面上加一个不可见的输入框，

   <div>
     <span>登录</span>
     <input type="text" >
      <input type="text" style="position: absolute;left: -10000px;pointer-events: none;" tab-index="-1">
   </div>