iOS Safari 8 input overflow scroll

问题

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>

回答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);
});

回答2:

I'm seeing the same problem in a web app I'm coding for mobile devices.

If you add the website to your homescreen, however and run it with <meta name="apple-mobile-web-app-capable" content="yes"> in the head, then the problem does not show: you can now scroll through the input text by moving the caret left or right at the edge of the input field.

来源：https://stackoverflow.com/questions/28544163/ios-safari-8-input-overflow-scroll