html - input[type=password] IOS 不渲染键盘(Safari+Chrome)

Question

我注意到密码输入和 IOS 设备存在问题。当您专注于密码输入时，键盘应该显示，但我得到一个空的白框。
这发生在最基本的密码输入上:<input type="password" name="password">我尝试了一些变体:<input type="password" name="password" autocomplete="new-password">目前我有一个“解决方法”，它以 type="text" 开始输入然后一旦用户键入了一个字符，将输入类型更改为密码(这使字段保持隐藏/安全，但允许键盘显示)。这样做的问题是不会自动完成现有密码(例如，在登录屏幕上选择电子邮件 + 自动完成密码)。
这是使用 BrowserStack 复制的 Google 登录屏幕上的问题(我们也在真实设备上复制了此问题) iPhone 11 IOS 13

更新:
这会影响 IOS 13 + 14，但不会影响早期版本。

Answer 1

当然，这可能是 iOS 更新错误问题，我可以建议一种不同的方法来模拟密码输入...
首先将其添加到您的自定义 css 文件或您创建 css 类的任何位置:
基本上，您正在创建一个类来屏蔽输入以隐藏密码

/* Mask the input as password */
.password-mask {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}

然后你可以在你的输入中使用它，如下所示:

<input class="password-mask" required type="text" autocomplete="current-password">

对于自动完成属性，您需要使用:current-password 以使其表现为密码输入。