Запретить iOS обрабатывать событие фокуса на <input>

Question

Запретить iOS обрабатывать событие фокуса на <input>

1

Учитывая, что iOS отвечает на <input type='text'> помощью функции прокрутки/разбиения position: fixed, есть ли способ остановить iOS/Safari от получения этого события? Я пробовал множество обходных решений этой ошибки, но никто не подходит для нашего случая использования. Мне нужен вход, чтобы получить еще один класс :focus pseudo class, и вызывать blur момента, когда он сфокусирован, не совсем трюк, но любые другие предложения будут оценены!

Для некоторого фона у нас есть пользовательская клавиатура, в которой мы скрываем iPad-клавиатуру (используя свойство readonly на входах), и клавиатура фиксируется в нижней части экрана. Он работает достаточно хорошо, за исключением того, что высота страницы больше высоты экрана iPad, если кто-то нажимает на вход, наша пользовательская клавиатура перескакивает в нижнюю часть страницы, где ее невозможно увидеть. У меня в настоящее время есть обходное решение, где мы переключаемся на position: absolute, но у нас так много страниц, это не идеальный/склонный к ошибкам, чтобы вычислить, где разместить пользовательскую клавиатуру, чтобы она оказалась внизу iPad экран каждый раз. Примечание. Мне не нужно это решение для работы на iPhone/Android.

Julie 18 окт. 2017, в 18:03

Источник

0

Можете ли вы предоставить рабочую демонстрацию, которая воспроизводит проблему?
Kostas Siabanis 21 окт. 2017, в 21:48
0

Динамическое вычисление абсолютной позиции. Используйте jQuery и обновите его сверху при прокрутке.
GramThanos 23 окт. 2017, в 10:55

Теги:

javascript

css

ios

1 ответ

Ещё вопросы

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

user8811940 · Accepted Answer · 2017-10-22T15-13-00.000Z

Это был довольно хак, но, похоже, он работает:

body, html {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

Просто добавьте это в свой CSS. Мне нужно было удалить маржу, не уверен, повлияет ли это на ваш дизайн. Если это так, вы можете попробовать добавить дополнение вместо этого, но я не пробовал.

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

Если html не прокручивается, мне нужно добавить прокрутку назад, поэтому я применяю его к телу. Это заставляет прокрутку терять импульс, и, чтобы добавить его обратно, вам нужно, чтобы -webkit-overflow-scrolling: touch вещь.

Итак, чтобы быть более понятным, что происходит, код должен быть таким - но я не пробовал:

html {
    margin: 0;
    overflow: hidden;
    height: 100%
}
body {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

Похоже, черная магия, что она делает?
Огромное спасибо!! Второй пример работает. Я пробовал некоторые html/body решения на других страницах SO, но они не работали. Это прекрасно работает, и все еще прокручивает. Вау, ты сделал мой день / неделю лучше!
Будем надеяться, что Apple не изменит это, чтобы предотвратить это!