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

Ответ 1

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

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

Ответ 2

Ooops, предлагаемый 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 есть ошибка, поэтому вместо этого перехватите фокус). Итак, просто скажите, что они не делают этого явно.

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

Итак, решение этого вопроса заменит триггер focus на select, т.е.

element.select()

кроме element.focus()

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

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

Ответ 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();
    };
};

Ответ 6

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

Ответ 7

Это сработало для меня (используя 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);
        });

Ответ 8

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

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

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

Это, очевидно, не ограничивается использованием jQuery. Vanilla js может использоваться для затухания.

Ответ 9

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

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

cordova plugin add ionic-plugin-keyboard

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

cordova.plugins.Keyboard.disableScroll(true);

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

Ответ 10

Чтобы "сфокусироваться" без какой-либо прокрутки, вы можете использовать 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);