软键盘处于活动状态时，网页会向上滑动

Question

我有一个聊天页面布局Web应用程序，其底部是输入，顶部是标题。当输入焦点对准时，页面将向上移动。

这些页眉出现在我的页面中，用于防止缩放或其他有害行为。

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

当尝试使用JavaScript使用window.innerHeight调整窗口大小时，即使使用setTimeout()也不可行

浏览器是否有一种解决方法，无法平移整个页面，或者不减去键盘高度来调整大小？

Answer 1

从Safari 10开始，键盘高度不会影响window.innerHeight。 Source：

  

显示键盘时，iOS 10上的Safari和WKWebView不会更新window.innerHeight属性。

您已经发现，这不仅使正确调整显示区域的元素大小变得非常困难，而且在打开键盘时没有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> root </div>内尝试过<div> your_element </div>

Answer 4

我建议您在标头上使用position:fixed; top:0;而不创建克隆。