iOS Safari 8输入框溢出滚动

Question

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

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

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

是否有任何解决此问题的方法？我已上传了一个包含不同输入类型的示例页面，行为在它们所有的输入类型中都存在。

Fiddle: 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>

- Paul Redmond

---

也在8.2中持续存在。 - Aron Woost

而且8.3。不确定我们是否会在iOS 9之前看到修复。 - Aron Woost

这是一个已知的错误：https://bugs.webkit.org/show_bug.cgi?id=148061 - cvrebert

iOS 9.3.2仍存在Bug :( - elbowlobstercowstand

Answer 1

以下代码可以帮助一些。如果您选择的文本比<input type=text>的大小要大，那么选择文本的效果可能不太好。在iPad上测试了Safari和Chrome浏览器，iOS版本为10.2。

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

- aflin

Answer 2

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

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

- Eric J. Francois

---

确实，当作为主屏幕应用运行时，该错误不会持续存在。 - Aron Woost