iOS Safari8输入溢出滚动条

Question

我在mobile Safari版本8.1上遇到了一个表单字段的问题。这似乎是移动设备上所有版本的Safari 8的一个bug。

当您在输入中键入文本，并且该文本比输入本身更长时，光标会随着您的键入而不断向右移动-这是正确的。问题是，当您按住选择并尝试向左移动到隐藏的文本时，您无法滚动。同样，如果选择输入之外，则无法向右滚动以查看隐藏文本。

您唯一的选择是全选并删除。

是否有解决此问题的方法？我上传了一个具有不同输入类型的示例页面，行为存在于所有这些输入类型中。

小提琴：http://jsfiddle.net/b7kmxaL6/ (在移动safari中访问)

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

​

​

Answer 1

这里有一些代码，它将会有一些帮助。如果选择的部分大于<input type=text>的大小，则选择文本的效果不佳。在Safari和Chrome的iOS 10.2的iPad上进行了测试。

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

Answer 2

我在为移动设备编写的web应用程序中看到了同样的问题。

但是，如果您将该网站添加到您的主屏幕上，并在标题为<meta name="apple-mobile-web-app-capable" content="yes">的情况下运行它，则问题不会出现:您现在可以通过向左或向右移动输入字段边缘的插入符号来滚动输入文本。