選擇時鍵盤不顯示<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"/>