input[type=password] IOS 不渲染键盘（Safari+Chrome）答案

【问题标题】：input[type=password] IOS not rendering keyboard (Safari+Chrome)input[type=password] IOS 不渲染键盘（Safari+Chrome）
【发布时间】：2021-05-14 23:37:21
【问题描述】：

我注意到密码输入和 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，但不会影响早期版本。

【问题讨论】：

嘿，我不确定，但我们使用 autocomplete="current-password"。试试这个而不是 new-password 看看它是否会改变你的结果。也许看看 autocomplete="off" 是否改变了什么。
是的，有几个地方我们有这种类型的密码字段，我们有当前密码和“新密码”，还没有尝试“关闭”，但如果停止自动完成会很遗憾.似乎是 iOS 问题，而不是其他问题。
也看到了同样的问题。你设法得到一个修复？我最初尝试将字段设置为“文本”，然后在第一个焦点或关键事件时，更改为“密码”。似乎可行，但我还没有在我的应用程序中全局实施它，希望得到更好的修复。
@raj no 我仍在使用我提到的工作（与您正在做的相同）。但我注意到这会导致另一个问题，因为没有焦点输入类型是“文本”，不允许密码自动填充。我真的不知道该怎么做，我想让自动填充工作，我也希望没有自动填充的人能够完成输入？？？？
我有类似的问题，但是使用 React Native 应用程序，我们无法在真实设备上重现它，只能在 BrowserStack (iOS 13+) 上重现。你用过什么真机？

标签： html ios iphone forms input

【解决方案1】：

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

【讨论】：

我很想找到有关此更改的官方参考，但我在任何发行说明中都看不到它。根据 SauceLabs（类似于 BrowserStack），它是在 iOS 13.2 中引入的：support.saucelabs.com/hc/en-us/articles/…
只是为了跟进这个@TomRobinson，browserstack 发布了这个（非常模糊的）FAQ entry

【解决方案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 以使其表现为密码输入。

【讨论】：

谢谢@Larav 我认为这可行，我已经读过这个，但由于可能（我不确定是否存在）安全问题而最初决定反对它 - 也不确定是否自动完成可以工作，但只是做了一个基本的测试，看起来确实如此。
@NickMcB 是的，到目前为止我知道没有安全问题，因为它基本上和做的一样，屏蔽输入而不是别的，实际上如果您对其进行测试，您会发现无法复制屏蔽输入的实际内容。据我所知，这是一个有效的替代品。
@LavaDev，为了安全起见，我认为在检查 HTML 时输入的值是可见的（因此任何恶意 JS 都可以访问它，而 type="password" 它会不是。我也检查过这个，看起来我错了，我可以通过简单的事件侦听器看到它可以获取 [password] 事件值：codepen.io/NickMcBurney/pen/NWdrjWm
@NickMcB 使用 type="password" 并简单地检查浏览器中的元素并将输入类型更改为文本时，绝对有可能看到密码，这种行为一直存在，你可以这样做这在任何网站上，这就是为什么在浏览器中存储密码并不完全安全，但无论如何，安全性应该是在您的网站上使用 https，并最终处理 CSRF 安全性，如果用户被感染对于恶意软件，您无法保护他们的数据，这就是如今 2FA 被广泛使用的原因，因为它增加了额外的安全层。