仅在 iOS 上选择 <input> 时键盘不显示

Posted 2023-03-14

【中文标题】仅在 iOS 上选择 <input> 时键盘不显示

【英文标题】：Keyboard doesn't show up when selecting <input> on iOS only

【发布时间】：2020-01-10 04:16:17

【问题描述】：

对于我网站上的特定字段，在 Safari ios 上运行时，键盘不会显示在我的网站上。它适用于网络和 android chrome。

只有当我在 safari 上选择多选项卡按钮并再次返回网站时，才会显示键盘。然后，当我选择该字段时，键盘将出现。

当我选择改变键盘输入行为的多选项卡按钮时，有哪些变化？

更新：

在单击输入文本字段之前（具有只读属性）：

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off" readonly
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

单击文本字段后（将触发 onfocus 事件并删除 'readonly' 属性），但键盘仍然不显示。

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off"
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

我们是否需要刷新视图以使输入字段只读属性的删除生效？

Android 与上面的代码完美配合，只是想知道为什么它只发生在 iOS 设备上（包括 safari 和 chrome）

【参考方案1】：

尝试为 touchstart 事件添加附加属性 - ontouchstart，它执行相同的 javascript：

<input type="password" name="extLoginValidVO.password" maxlength="20" mandatory="true" autocomplete="off" 
       ontouchstart="this.removeAttribute('readonly');" 
       onfocus="this.removeAttribute('readonly');" 
       class="placeholder"
       id="password"
       readonly>

您可能还想保留onfocus，因为桌面浏览器需要它。 这是我使用的 jsfiddle：https://jsfiddle.net/u5g7t4c1/4/

【讨论】：

感谢@Viktor Nonov，添加 ontouchstart 属性后它可以完美运行。只是想知道为什么我在 Android 浏览器（特别是 chrome）上没有这个问题。是否有任何属性可以同时支持 Web 和触摸设备？

@user1872384 我找不到任何关于它为什么可以在 Android 的 Chrome 上运行，而不能在 iOS 的 Safari 上运行的具体信息。我的怀疑是 Safari 检查元素是否具有只读属性，确定它不需要键盘然后触发焦点事件，而 Chrome 可能在触发焦点事件后检查只读事件，但我找不到一种验证方式。在您的情况下，我不知道任何支持开箱即用的网络和触摸设备的属性。你可以试试 jQuery Mobile 之类的东西，它定义了像 tap 这样的事件。

你的解释听起来很有道理。我也找不到任何可靠的东西来支持这种情况。也许 Android Chrome 使用 V8 引擎，而 iOS chrome/safari 使用 WebKit 和 JavaScriptCore (en.wikipedia.org/wiki/Google_Chrome#iOS)。但我不知道导致这种情况发生的差异是什么

【参考方案2】：

您在何处/何时将“只读”属性放在 Input 上？

它可以防止键盘弹出。

【讨论】：

嗨 Chuu 它是在取消隐藏时放置的（最初这个文本字段是隐藏的）。我实际上已经在“onfocus”事件中删除了输入上的“只读”属性......“只读”属性被删除但键盘仍然没有出现......

【参考方案3】：

只需在密码输入中使用 autocomplete="current-password" 即可解决问题！ :)

经过数小时的反复试验，我遇到了同样的问题，我发现在 Safari iPhone 7 中，密码类型输入的自动完成属性应设置为“当前密码”。

<input type="password" name="password" autocomplete="current-password"/>