當軟鍵盤處於活動狀態時，網頁會向上滑動

Question

我有一個聊天頁面布局Web應用程序，底部有輸入，頂部有一個標題。 當輸入處於焦點時，頁面向上移動。

這些標題存在於我的頁面中，用於防止縮放或其他不需要的行為。

<meta name="viewport" content="width=device-width,initial-scale=1">

嘗試使用window.innerHeight使用javascript調整窗口大小但是即使使用setTimeout()也不能正常工作

是否有一種解決方法，瀏覽器不會平移整個頁面，或通過減去鍵盤的高度來調整大小？

Answer 1

從Safari 10開始，鍵盤高度不會影響window.innerHeight 。 來源 ：

當顯示鍵盤時，iOS 10上的Safari和WKWebView不會更新window.innerHeight屬性。

正如您所發現的那樣，這不僅可以使元素正確地調整到顯示區域的resize ，而且在打開鍵盤時沒有resize事件。

由於鍵盤將整個頁面滑出視口的頂部，因此您可以使用窗口高度與頁面的scrollTop屬性之間的差異來計算顯示高度。 要檢測鍵盤何時打開或關閉，請在輸入上偵聽onfocus和onblur事件。

var myInput = document.getElementById( "your-input-field-id" );
var myContainer = document.getElementById( "your-container-id" );

myInput.addEventListener( 'onfocus', function() {
    var displayHeight = window.innerHeight - myContainer.scrollTop;
    myContainer.style.height = displayHeight + "px";
}, true );

myInput.addEventListener( 'onblur', function() {
    myContainer.style.height = "100%";
}, true );

Answer 2

制作標題主元素的克隆，並將其置於頂部，如果用戶關注輸入將是最簡單的答案。

$('#example').clone().addClass('cloned').prependTo('body');

但是，您必須向該元素添加唯一類，並將以下css提供給該類，

.cloned {
    position:fixed;
    left:0;
    top:0;
    z-index:'give highest z-index';
}

Answer 3

你在另一個<div> your_element </div>嘗試了<div> root </div> <div> your_element </div>

Answer 4

我建議你使用這個position:fixed; top:0; position:fixed; top:0; 在標題上沒有創建克隆。