Прокрутка входного потока iOS Safari 8

У меня проблема с полями формы на мобильном Safari, версия 8.1. Это похоже на ошибку со всеми версиями Safari 8 на мобильных устройствах.

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

Ваш единственный выбор - выбрать все и удалить.

Любое обходное решение этой проблемы? Я загрузил образец страницы с различными типами ввода, поведение существует во всех них.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (посещение мобильного сафари)

<form action="">
    <fieldset>
        <input type="text" class="text">
        <input type="email" class="email">
        <input type="password" class="password">
    </fieldset>
</form>

Ответ 1

Вот код, который поможет немного. Выбор текста не работает так хорошо, если вы выбираете часть, большую размера <input type=text>. Протестировано на iPad с iOS 10.2 в Safari и Chrome.

var interval;

$('#inputid').focus(function() {
        var el=this,ratio=el.scrollWidth/el.value.length;
        var inputwidthinchar=$(el).width()/ratio;

        clearInterval(interval);
        interval=setInterval(function(){
                var x=el.selectionStart,x2=el.selectionEnd,width=$(el).width();
                if ( (width + 1) > el.scrollWidth) return;
                var curposS=x-el.scrollLeft/ratio,
                    curposE=x2-el.scrollLeft/ratio,
                    tenper=inputwidthinchar*.1;
                if (curposS > tenper && curposE < (inputwidthinchar-tenper) ) return; // only if at edges;
                if (curposS < tenper && curposE > (inputwidthinchar-tenper) ) return; // if at both edges, don't do anything;
                //center text - good for tapping on spot to be centered
                //$(el).scrollLeft(x*ratio-(width/2));

                //scroll two char at a time - good for touch and hold at edge and more like expected function
                if (curposS < tenper)
                        $(el).scrollLeft(el.scrollLeft-ratio*2);
                else
                        $(el).scrollLeft(el.scrollLeft+ratio*2);

                el.setSelectionRange(x, x2); //not working so well.
        },100);
}).blur(function(){
        clearInterval(interval);
});

Ответ 2

Я вижу ту же проблему в веб-приложении, которое я кодирую для мобильных устройств.

Если вы добавите веб-сайт на рабочий стол и, тем не менее, запустите его с <meta name="apple-mobile-web-app-capable" content="yes"> в голове, тогда проблема не появится: теперь вы можете прокручивать текст ввода, перемещая каретку влево или вправо на краю поле ввода.