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

Question

对于我网站上的特定字段，在 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）

Answer 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/

Answer 2

你在哪里/什么时候把“只读”属性放在输入上？

它可以防止键盘弹出。

Answer 3

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

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

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