iOS Safari 8 输入溢出滚动

Question

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

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

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

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

小提琴：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> 的大小，则选择文本效果不佳。在装有 iOS 10.2 的 Safari 和 Chrome 中的 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"> 运行它，则问题不会出现：您现在可以通过在输入字段。