iOS Safari 8输入溢出滚动

Question

我在移动版Safari 8.1版上遇到了表单字段的问题。这似乎是移动版Safari 8的所有版本的错误。

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

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

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

小提琴：http://jsfiddle.net/b7kmxaL6/（访问移动游猎）

<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

我在为移动设备编码的网络应用中看到同样的问题。

如果您将网站添加到主屏幕，然后在头部使用<meta name="apple-mobile-web-app-capable" content="yes">运行它，则问题不会显示：您现在可以通过向左或向右移动插入符号来滚动输入文本。输入字段的边缘。