Веб-страница продвигается, когда активна мягкая клавиатура

У меня есть веб-приложение макета страницы чата с входом внизу, а заголовок вверху. когда вход находится в фокусе, страница перемещается вверх.

Эти заголовки присутствуют на моей странице для предотвращения масштабирования или другого нежелательного поведения.

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

При попытке изменить размер окна с помощью javascript, используя window.innerHeight но это не работает даже с помощью setTimeout()

Есть ли способ обойти браузер для того, чтобы не панорамировать всю страницу или не изменять размер с вычитанием высоты клавиатуры?

Ответ 1

Начиная с Safari 10, высота клавиатуры не влияет на window.innerHeight. Источник:

Safari и WKWebView на iOS 10 не обновляют свойство 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 );

Ответ 2

сделать клон основного элемента заголовка и поместить его в верхнюю часть, если всякий раз, когда пользовательский фокус на ввод будет самым простым ответом.

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

Однако вы должны добавить уникальный класс к этому элементу и предоставить ниже css этому классу,

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

Ответ 3

вы пробовали <div> root </div> внутри другого <div> your_element </div>

Ответ 4

Я бы посоветовал вам использовать position:fixed; top:0; position:fixed; top:0; на заголовке без создания клонов.