Я столкнулся со следующей проблемой в мобильной версии моего веб-сайта, созданной с помощью ReactJS (в частности, в мини-приложении Telegram). При фокусировке на поле ввода или текстовой области появляющаяся клавиатура закрывает экран. Я попытался решить проблему, прикрепив событие onFocus к входной/текстовой области с помощью следующего кода:
Код: Выделить всё
const handleAppearanceKeyboard = (ref) => {
setIsInputFocused(true);
setTimeout(() => {
if (ref.current) {
ref.current.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}
}, 150);
};
Здесь я использовал ссылку с помощью useRef() для поля ввода. Однако на устройствах Android это работает некорректно, а на iPhone оно начинает дрожать при прокрутке.
Как создать работающее решение, чтобы клавиатура всегда отображалась под вводом и не отображалась не перекрывается ли оно при фокусировке? Например, как показано здесь:
https://lichess.org/signup.
Подробнее здесь:
https://stackoverflow.com/questions/791 ... rs-input-f