Отключить прокрутку при изменении элементов формы фокуса в ipad web app

Question

У меня есть веб-приложение. Я пытаюсь отключить / предотвратить прокрутку, которая происходит, когда вы фокусируете внимание на различных входах формы (т. Е. Прокрутка, которая происходит при продвижении по элементам ввода в форме).

Я уже отключил прокрутку с этим:

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

Чтобы добавить немного больше информации - у меня есть несколько "слайдов", из которых состоит моя страница. Каждый из них имеет размер 768x1024, и они «сложены» на странице (т.е. страница имеет размер 768x3072 [1024 * 3 = 3072]), и когда вы нажимаете ссылку, я использую плагин scrollTo jquery для прокрутки к следующему «слайду» и .focus() на элементе ввода.

Кто-нибудь знает, как это сделать?

Answer 1

Я обнаружил, что в UIWebView document.body также иногда перемещается.Поэтому я использую:

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

Answer 2

Упс, предложенный window.scrollTo довольно паршиво и делает вещи непредсказуемыми.

Попробуйте это лучшее решение:

jQuery('body').bind('focusin focus', function(e){
  e.preventDefault();
})

Или просто подключите ваш ввод:

jQuery('input.your-input-class').bind('focusin focus', function(e){
  e.preventDefault();
})

Почему? Браузеры могут прокручивать сфокусированный элемент формы в представление по умолчанию при инициированном событии 'focusin' (в Firefox есть ошибка, поэтому вместо этого зацепите фокус) Поэтому просто скажите им, что не делайте этого явно.

Кстати, если событие focus вызвано element.focus() в вашем коде, то даже решение по факту не будет работать.

Таким образом, решение этой проблемы - заменить focus триггер на select, т. Е.

element.select()

кроме element.focus()

Если вам не нравится подход element.select(), так как он будет select текстом внутри элемента ввода, затем попытайтесь создать Range object текста элемента ввода и сверните его, если хотите, извините за отсутствие время попробовать это в данный момент.

Answer 3

Чтобы браузер не прокручивал элемент, на который вы перемещаете фокус, я использую jQuerys one обработчик событий. Прямо перед тем, как переместить фокус на элемент, мы добавляем слушателя к событию scroll и прокручиваем счетчик. Слушатель события удаляется jQuery.

var oldScroll = $(window).scrollTop();

$( window ).one('scroll', function() {
    $(window).scrollTop( oldScroll ); //disable scroll just once
});

$('.js-your-element').focus();

Этот способ кажется мне простым, эффективным и прекрасно работает во всех тестах, которые я провел.

Надеюсь, это кому-нибудь поможет.

Answer 4

Если вы не хотите, чтобы ввод был редактируемым, ответ от kpozin работает нормально. Но как только вы удалите атрибут readonly onfocus или onclick, поле ввода снова прокручивается в фокусе.

Что действительно помогает и не влияет на фокус или способность вводить текст, так это добавление onFocus="window.scrollTo(0, 0);" к элементам ввода.

Конечно, вы должны гарантировать, что соответствующий ввод не покрыт экранной клавиатурой!

См. Также этот пост: Предотвращение прокрутки экрана элемента на iPhone?

Answer 5

Обновление об этом - я видел решение window.scroll(0,0) в нескольких разных местах, но, похоже, оно только ухудшало его. У меня есть несколько встроенных текстовых вводов на моей странице, поэтому при перемещении фокуса между ними автоматическая прокрутка вверх и вниз в Safari делает страницу практически непригодной для использования, особенно в альбомной ориентации.

После недолгой борьбы с iOS 8 я обнаружил, что это останавливает прокрутку. Это работает при изменении фокуса с одного элемента на другой, так как вам нужно прикрепить событие onblur к чему-либо:

var moveFocus = function (blurId, focusId) {
    var blurInput = document.getElementById(blurId);
    var focusInput = document.getElementById(focusId);
    if (blurInput && focusInput) {
        blurInput.onblur = function () {
            if (focusInput.setSelectionRange && focusInput.setSelectionRange()) {
                var len = focusInput.value.length;
                focusInput.setSelectionRange(len, len);
            }
            focusInput.focus();
        };
        focusInput.focus();
    };
};

Answer 6

Чтобы «сфокусироваться» без прокрутки, вы можете использовать select. select по умолчанию выберет весь текст внутри ввода. Чтобы имитировать поведение focus и иметь курсор в конце ввода, вы можете использовать:

var myInput = document.getElementById('my-input');
var length = myInput.value.length;  // Or determine the value of length any other way
myInput.select();
myInput.setSelectionRange(length, length);

Answer 7

Если вы разрабатываете мобильное веб-приложение с помощью cordova, для этого есть плагин:

Плагином, который решил эту проблему для меня, был Telerik Keyboard Plugin . Он использует базовый UIWebView. Установите плагин

cordova plugin add ionic-plugin-keyboard

И вызовите эту команду после загрузки вашего приложения:

cordova.plugins.Keyboard.disableScroll(true);

Если вы используете WKWebView, вы можете использовать, например, этот плагин

Answer 8

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

Поэтому я добавляю имя класса с именем fade-in, которое соответствует css display:none

используя jQuery, я просто делаю jQuery(".fade-in").fadeIn(); после того, как документ готов, и проблема исчезла.

Это явно не ограничивается использованием jQuery. Ваниль JS могут быть использованы для исчезновения.

Answer 9

Это сработало для меня (с помощью jQuery). Это позволяет прокрутить, а затем возвращает вас в правильное положение, когда вы выходите из ввода.

    var saveScrollLeft;
    $("input, textarea")
        .focus(function () {
            clearTimeout(blurTimeoutId);
            saveScrollLeft = $("body").scrollLeft();
            })
        .blur(function () {
            // The user might be moving from one input to another, so we don't want to quickly scroll on blur.  Wait a second and see if they are off all inputs.
            blurTimeoutId = setTimeout(function () {
                $(window).scrollLeft(saveScrollLeft);
                }, 1000);
        });

Answer 10

Попробуйте этот ответ от BLSully.Первоначально присвойте всем вашим элементам ввода атрибут readonly="readonly".Это предотвратит прокрутку Mobile Safari на него.Удалите атрибут в фокусе и добавьте его снова для размытия для каждого элемента.