Как предотвратить клавиатуру iOS от нажатия экрана с помощью CSS или JS

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

На устройствах iOS, когда поле ввода сфокусировано, открывается клавиатура. Однако, когда он открывается, он фактически выталкивает полный документ из пути, так что половина моей страницы выходит за верхнюю часть окна просмотра. Я могу подтвердить, что фактический тег html был нажат, чтобы компенсировать клавиатуру и что это не произошло с помощью CSS или JavaScript.

Кто-нибудь видел это раньше, и если да, то есть ли способ предотвратить его или изменить положение после открытия клавиатуры? Это проблема, потому что мне нужно, чтобы пользователи могли видеть контент в верхней части модального файла, в то время как одновременно я хотел бы автофокусировать поле ввода.

Ответ 1

первый

<script type="text/javascript">
 $(document).ready(function() {
     document.ontouchmove = function(e){
          e.preventDefault();
          }
 });

то это

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

Ответ 2

Для любого, кто сталкивался с этим в React, мне удалось исправить это, адаптировав решение @ankurJos следующим образом:

const inputElement = useRef(null);

useEffect(() => {
  inputElement.current.onfocus = () => {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
  };
});

<input ref={inputElement} />

Ответ 3

Оба IOS8 и Safari bowsers ведут себя одинаково для input.focus(), возникающих после загрузки страницы. Они оба приближаются к элементу и поднимают клавиатуру. (Не слишком уверен, что это поможет, но попробовали ли вы использовать что-то вроде этого?)

HTML

<input autofocus>

for (var i = 0; i < 5; i++) {
document.write("<br><button onclick='alert(this.innerHTML)'>" + i + "</button>");
}

//document.querySelector('input').focus();

CSS

button {
width: 300px;
height: 40px;
}

Кроме того, вам придется использовать обходное средство для пользователя-агента, вы можете использовать его для всех версий IOS

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
element.focus();
}

Ответ 4

В некоторых ситуациях эту проблему можно устранить, переориентировав элемент ввода.

input.onfocus = function () {
  this.blur();
  this.focus();
}