В iOS Safari какой более быстрый способ получить размер клавиатуры или плавающую кнопку над клавиатурой? ⇐ CSS

[Anonymous]

Я использую window.visualViewport.height(видимую высоту представления), чтобы определить, где начинается виртуальная клавиатура в iOS Safari. И он работает и реагирует, как только у меня есть значение window.visualViewport.height, сохраненное в переменной.
Однако, когда мне изначально нужно получить это значение высоты для в первый раз, это занимает некоторое время. Я использую прослушиватель событий фокуса, чтобы в конечном итоге вызвать функцию, которая инициирует прослушивание с помощью window.visualViewport.addEventListener('resize', function func() {...window.visualViewport.height..., которая выводит Размер «представления без клавиатуры» при первом запуске, но затем выводит правильный размер «представления с клавиатуры» при втором запуске.
Я могу придумать два возможных обходных пути:

• неудачный обходной путь: возможно, JS автоматически открывает клавиатуру (получит высоту) и быстро закрывает ее при загрузке страницы, но я сомневаюсь, что это можно сделать без отображения клавиатуры заметно для пользователя.
• Хреновым решением проблемы начального медленного движения может быть создание списка всех значений высоты для всех устройств iOS, которые вы хотите обслуживать, а затем больше не используйте Visual.Viewport.height и вообще не изменяйте размер прослушивателя событий.

Есть ли лучший способ закодировать это для iOS Safari чтобы получение этого значения в первый раз не занимало так много времени?
Код: полный пример кода ниже, он работает так, как я описал (т.е. с задержкой перемещения кнопки при первом открытии клавиатуры, но после этого очень быстро).








#menuBtn {
position: fixed;
right: 0px;
bottom: 0px;
}







Test



/*
Variable declarations
*/
let keyboardStartPos = 0;
let menuBtnElem = document.getElementById( 'menuBtn' );
let originalElemCss = menuBtnElem.style.cssText;
let visibleView = window.visualViewport;
let maxViewHeight = document.documentElement.clientHeight;
let textAreaElem = document.getElementById( 'textArea' );

/*
Functions
*/
/*
Function below calls "listenForViewReduction()" only once and ends. After
that "listenForViewReduction()" calls this function back after the view's
height when the keyboard's open has been successfully saved to a variable.
*/
function moveElemAboveKeyboard(){

if( keyboardStartPos == 0 ){
listenForViewReduction();
return;
}

menuBtnElem.style.bottom = 'auto';
menuBtnElem.style.top = ( keyboardStartPos - menuBtnElem.offsetHeight ) + 'px';

}

/*
Function below is used only once to get size of visible view when the
keyboard's open. When this is first called, the visible view will not
be correct (it will still be the full view), but straight after the
event listener triggers a second time and reads the correct view. After
which it saves the value, calls back "moveElemAboveKeyboard()" and
removes the event listener (itself).
*/
function listenForViewReduction(){

visibleView.addEventListener( 'resize', function func() {

let visibleViewHeight = visibleView.height;

if ( visibleViewHeight != maxViewHeight ){

keyboardStartPos = visibleViewHeight;

moveElemAboveKeyboard();

visibleView.removeEventListener('resize', func );
}
});
}

/*
Rest of code
*/
textAreaElem.addEventListener('focus', moveElemAboveKeyboard );
textAreaElem.addEventListener('blur', function() {
menuBtnElem.style.cssText = originalElemCss;
});






Подробнее здесь: https://stackoverflow.com/questions/784 ... r-an-above