小编点评

## 问题分析 当输入框中包含登录/login 时，会出现以下问题： 1. 输入框中只有显示密码框的钥匙图标 `🔑`，但实际输入框不存在。 2. 输入框中添加一个空白字符后，密码框才出现在输入框中。 ##解决方案 根据分析问题，可以采取以下措施解决问题： 1. 在页面加载时，添加一个空白字符到文本框中，以确保它出现在输入框中。 2. 在输入框中添加一个不可见输入框，作为密码框的 placeholder。 ## 代码示例 ```html

登录

``` ## 总结 通过添加空白字符和不可见输入框，可以在 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>