Исправлена ​​​​ошибка, из-за которой родная клавиатура Apple iOS скрывала поле ввода

внешний интерфейс WeChat iOS
Исправлена ​​​​ошибка, из-за которой родная клавиатура Apple iOS скрывала поле ввода

В последнее время я работаю над интерфейсом чата, который имитирует WeChat. В нижней части страницы закреплено поле ввода. Первоначально оно было расположено внизу с помощью фиксированного. На телефонах Android нет проблем, но на iOS, когда при нажатии на содержимое ввода появляются различные ситуации Клавиатура закрывает поле ввода. Du Niang придумал много решений, но ни одно из них не может быть решено идеально, и я обнаружил, что у многих людей есть эта проблема, поэтому я долго думал и придумал относительно хорошее решение, которым могу поделиться с вами.

Сначала позвольте мне перечислить решения в Интернете, а также мои практические результаты.

position

// 修改position:fixed; 为position:absolute;
// position:fixed;
position:absolute;

Практика показала, что никакого воздействия нет, даже если не использовать позиционирование, поле ввода будет заблокировано.

scrollTop

setTimeout(function(){
    document.body.scrollTop = document.body.scrollHeight;
},300)

Этот метод может решить проблему окклюзии на iOS10, но на iOS11 клавиатура сначала подтолкнет поле ввода вверх, а затем поле ввода быстро вернется в нижнюю часть экрана и снова будет закрыто.

scrollIntoView scrollIntoViewIfNeeded

Эти два метода вообще не видят никакого эффекта

мое решение

код напрямую

// css
.mainBox{
    height:100vh;
    position:relative;
}
.inputBox{
    position:absolute;
    bottom:0;
}
// 输入框获得焦点事件
onFocus() {
    setTimeout(function(){
        // 设置body的高度为可视高度+302
        // 302为原生键盘的高度
        document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 302) + 'px';
        document.body.scrollTop = 302;
    }, 300)
}
// 输入框失去焦点事件
onBlur() {
    // 设置body恢复原来的高度
    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
}

Этот метод эквивалентен добавлению высоты клавиатуры к телу, которое может просто занять положение клавиатуры, поместить содержимое страницы сверху, а затем предотвратить событие прокрутки тела, чтобы пользователь не мог сдвинуть страницу и прокрутить добавленный 302 белая страница. (Поскольку под рукой нет мобильного телефона iPhone X, совместимость на iPhone X может быть не идеальной, а отличается только высота клавиатуры. Это можно решить, оценив модель мобильного телефона и установив разную высоту)

Хотя 302 выглядит ненадежно, но родные клавиатуры мобильных телефонов Apple с большим и маленьким экраном все на этой высоте (на данный момент протестировано на 5s, 7p и 8 без проблем), и теперь большой проблемы нет. Я также ищу более полный метод, и я поделюсь с вами результатами. Другие методы ввода также пытаются решить проблему.Если у вас есть хорошее решение, вы можете обмениваться и учиться вместе.

Категории