bug之safari输入框
目录
- 前言
- 排查发
- 解决方案
前言
在开发中发现一个Safari才会有的bug，文本输入框中会显示密码框才有的钥匙图标🔑，图示如下：
排查发
当页面上有一个元素的文本包含登录/login，并且在其后面只有一个输入框，就可以复现
<div>
<span>登录</span>
<input type="text" >
</div>
位置相反就不会出现
<div>
<input type="text" >
<span>登录</span>
</div>
解决方案
- 在登录字符中间加一个零宽字符
<div> <span>登​录</span> <input type="text" > </div> - 在页面上加一个不可见的输入框，
<div> <span>登录</span> <input type="text" > <input type="text" style="position: absolute;left: -10000px;pointer-events: none;" tab-index="-1"> </div>