Как запретить мобильной клавиатуре покрывать ввод html

Question

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

Apple документирует поведение здесь: https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Я видел несколько сообщений об этой проблеме, и существует несколько решений для разработки приложений для iOS, но нет реальных решений для веб-приложений.

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

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

Answer 1

Этот ответ взломан;но это лучшее решение, которое я придумала.

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

Используя некоторые слушатели javascript и класс CSS, этот отступ можно добавлять только при отображении клавиатуры.

body.keyboard {
    height: calc(100% + 500px); /* add padding for keyboard */
}

Следующий javascript будет добавлять и удалять класс CSS, когда ввод имеет фокус, которыйближе всего я смогу выяснить, когда отображается клавиатура.

// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
    const target = event.target;
    switch (target.tagName) {
        case "INPUT":
        case "TEXTAREA":
        case "SELECT":
            document.body.classList.add("keyboard");
    }
}, true); 
document.body.addEventListener("blur", () => {
    document.body.classList.remove("keyboard");
}, true); 

Стоит также отметить, что iOS выполняет раздражающее масштабирование, если размер входного шрифта меньше 16px, поэтому это также важно.

input {
    font-size: 16px !important;
}

Пожалуйста, дайте мне знать, если у вас есть лучшее решение.

Answer 2

Как насчет этого: stackoverflow: прокручивать текстовое поле вверх, когда всплывающее окно клавиатуры ?

Даже если вы не используете jquery, вы все равно можете привязать событие фокуса и прокрутить страницу с помощью window.scrollTo(0, document.body.scrollHeight); функция и просто прокрутите вниз.Интересно, что пространство создается, но не прокручивается до.

Если вы хотите заняться модными делами, вы можете проверить размер окна, чтобы определить, нужно ли и сколько вы хотите прокручивать.

Answer 3

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

Итак, как только вы поймете, вы можете скрыть клавиатуру как:

InputMethodManager manager = getSystemService(INPUT_METHOD_SERVICE);
manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);