16

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>

I cannot scroll right when I click and try to drag right, happens on the simulator and on an iOS device running safari 8.x

4

2 Answers 2

2

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);
});
0

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.

1
  • Indeed, the bug does not persists when running as a home screen app.
    – Aron Woost
    Jun 7, 2015 at 9:21

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.