<select> выпадающий мигающий фокус в браузере iphone со скриптом iScroll4

Question

См. Эту демонстрационную страницу в iphone http://jsbin.com/unese4/8 внизу страницы есть одно раскрывающееся меню, которое открывается, но не работает должным образом.

Этот вопрос связан с этим вопросом iScroll 4 не работает с формой

Answer 1

На самом деле, ваша проблема связана с этим вопросом:

проблема webkit-трансформации в сафари с использованием элементов выбора

Когда входное усилениеФокус в iOS Safari, он проверяет, виден ли ввод.Если это не так, Safari принудительно прокручивает документ и элементы, которые содержат ввод, чтобы сделать его видимым.

iScroll использует CSS-преобразование для перемещения прокручиваемой области вокруг, и это выглядит следующим образомПоведение Safari нарушено на select с - он не замечает преобразование, думает, что select не виден, и прокручивает его контейнер (#scrollable), чтобы сделать его видимым (опять же, не учитывая преобразование)), что выводит его из поля зрения.

По сути, это ошибка iOS, о которой следует сообщить в Apple столько веб-разработчиков, сколько затронуто этой проблемой!Обходной путь может быть наиболее эффективно реализован в iScroll, поэтому я рекомендую вам сообщить о проблеме его разработчикам.

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

workAroundiScrollSelectPositioning(myScroll);

Живая демоверсия находится на вашем jsbin paste здесь .Он срабатывает, когда select получает фокус, и выполняет три действия:

1. Запоминает положение прокрутки и говорит iScroll немедленно прокрутить в верхний левый угол (удаляя любое преобразование), иустанавливает свойства CSS top и left области прокрутки в текущую позицию прокрутки.Визуально все выглядит одинаково, но область прокрутки теперь расположена так, как ее видит Safari.

2. Блокирует iScroll от просмотра любых прикосновений (это ужасно, но останавливает iScroll fromприменяя трансформацию к области прокрутки, пока мы ее перемещаем).

3. Когда select теряет фокус, верните все обратно в прежнее положение (восстановите исходное положение и трансформируйте ипрекратить блокировку iScroll).

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

---

function workAroundiScrollSelectPositioning(iscroll){
    iscroll.scroller.addEventListener('focusin', function(e){
        if (e.target.tagName === 'SELECT') {
            var touchEvent = 'ontouchstart' in window ? 'touchmove' : 'mousemove',
                touchListener = {
                    handleEvent: function(e){
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                    }
                },
                blurListener = {
                    oldX: iscroll.x,
                    oldY: iscroll.y,
                    handleEvent: function(e){
                        iscroll.scroller.style.top = '';
                        iscroll.scroller.style.left = '';
                        iscroll.scrollTo(this.oldX, this.oldY, 0);
                        e.target.removeEventListener('blur', blurListener, false);
                        iscroll.scroller.removeEventListener(touchEvent, touchListener, true);
                    }
                };
            iscroll.scroller.style.top = iscroll.y + 'px';
            iscroll.scroller.style.left = iscroll.x + 'px';
            iscroll.scrollTo(0, 0, 0);
            e.target.addEventListener('blur', blurListener, false);
            iscroll.scroller.addEventListener(touchEvent, touchListener, true);
        }
    }, false);
}

Answer 2

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

Answer 3

Это модифицированная функция workAroundiScrollSelectPosition, которая сработала для меня.

function workAroundiScrollSelectPositioning(iscroll){
var touchEvent = 'ontouchstart' in window ? 'touchstart' : 'mousemove',
    oldX, oldY;
iscroll.scroller.addEventListener('focusin', function(e){
    if (e.target.tagName === 'SELECT') {
        var blurListener = {
                oldX: oldX,
                oldY: oldY,
                handleEvent: function(e){
                    iscroll.scroller.style['margin-top'] = '';
                    iscroll.scroller.style.left = '';
                    iscroll.scrollTo(oldX, oldY, 0);
                    e.target.removeEventListener('blur', blurListener, false);
                }
            };
        iscroll.scroller.style['margin-top'] = oldY + 'px';
        iscroll.scroller.style.left = oldX + 'px';
        iscroll.scrollTo(0, 0, 0);
        e.target.addEventListener('blur', blurListener, false);
    }
}, false);
iscroll.scroller.addEventListener(touchEvent, {
    handleEvent: function(e){
        if (e.target.tagName === 'SELECT') {
            oldX = iscroll.x,
            oldY = iscroll.y;
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    }
}, true);}