Запретить прокрутку на дисплее клавиатуры iOS 6

У меня запуталась странная проблема. В настоящее время я создаю мобильное веб-приложение, использующее HTML5 и CSS3 только для iOS 6.

Однако, когда элемент input получает фокус и отображается мягкая клавиатура, окно прокручивается так, что вход не скрывается клавиатурой (хотя он не будет в любом случае).

Я прочитал о SO и через Google, что можно добавить следующее, чтобы предотвратить это поведение (при просмотре этого внутри UIWebView):

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

Однако, похоже, что в iOS 6, хотя сначала окно прокручивается до 0,0, оно снова прокручивается, чтобы центрировать сфокусированный элемент. Кто-нибудь еще сталкивается с этим и знает ли они об исправлении для iOS 6?

Ответы

Ответ 1

Я тоже попал в эту проблему. Следующие действия на iOS 6:

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

В принципе, поскольку Safari решает, будет ли прокрутка страницы на основе вертикальной позиции текстового поля, вы можете обмануть ее, мгновенно перемещая элемент выше верхней части экрана, а затем снова после завершения фокусного события.

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

Ответ 2

Может ли это быть проблемой времени?

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

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

Ответ 3

Update: Хотя принятое решение работало с UIWebView, с тех пор появился более быстрый WKWebView. И если вы используете последнюю версию Cordova для iOS, вы можете включить WKWebView для устройств iOS 9, но по умолчанию просмотр по-прежнему будет прокручиваться вверх. Чтобы исправить это, просто добавьте плагин для клавиатуры (больше не нужны хаки CSS):

Добавить плагины Cordova в терминале:

cordova platform add [email protected]
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save

Задайте предпочтение iOS для использования WKWebView в Cordova config.xml

<platform name="ios">
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

Затем вставьте предпочтения клавиатуры iOS в Кордове config.xml

    <preference name="KeyboardShrinksView" value="true" />
    <preference name="DisallowOverscroll" value="true" />

Более подробная информация о настройках iOS приведена в документах Cordova: https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html

Ответ 4

Установите стиль input font-size 1em или выше.

<input type=text style="font-size:1.2em">