iOS Safari 8 input overflow scroll

Question

I have an issue with form fields on mobile Safari, version 8.1. This appears to be a bug with all version of Safari 8 on mobile.

When you type text into an input and that text is then longer than the input itself, the cursor keeps moving right as you type - this is correct. The problem is when you hold to select and try to move left to the text that is hidden, you cannot scroll. Likewise, if you select outside the input, you cannot scroll right to view the hidden text.

Your only choice is to select all and delete.

Any workaround to this problem? I have uploaded a sample page with different input types, the behaviour exists in all of them.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (Visit in mobile safari)

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

Answer 1

Here's some code which will help a little. Selecting text doesn't work so well if you are selecting a portion larger than the size of the <input type=text>. Tested on iPad with iOS 10.2 in Safari and 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);
});