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

据我所知，BrowserStack用于Screen Mirroring显示设备。Apple引入了一个安全更新，其中iOS 13密码类型输入会隐藏您正在投射/镜像到的屏幕上的键盘。您可以通过在 上测试Apple TV或在通话期间共享屏幕来复制此操作。因此，这并不是真正的错误，而是在平台而不是物理设备上进行测试的限制。

Answer 2

当然这可能是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 才能使其表现为密码输入。