如何使用虛擬鍵盤防止移動 Safari 中固定元素跳躍？

使用虛擬鍵盤的Mobile Safari 中的錯誤固定元素

處理Mobile Safari 中的固定元素可能是一項挑戰，尤其是在使用虛擬鍵盤時被開啟。當導航中的輸入欄位獲得焦點時，固定導航元素意外跳轉時會出現一個常見問題。

原因和解決方案

此行為可能是由於已知的移動 Safari 中的問題。建議的解決方案涉及動態更改固定元素的位置。

• 當輸入元素獲得焦點並且出現虛擬鍵盤時，將固定元素的位置屬性切換為絕對位置。
• 一旦輸入元素失去焦點並且鍵盤隱藏，恢復原始固定位置。

程式碼片段

以下程式碼片段示範了此解決方案：

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

透過新增此程式碼，即使使用者與輸入欄位互動並且出現虛擬鍵盤，導航元素也將保持固定在頁面底部。

以上是如何使用虛擬鍵盤防止移動 Safari 中固定元素跳躍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！