iOS Safari 8input溢出滚动

我在移动Safari 8.1版本中遇到了一个问题。 这似乎是在手机上的所有版本的Safari 8的错误。

当你在input文本中input文本时，文本比input本身更长，光标在input时会一直向右移动 – 这是正确的。 问题在于，如果您select并尝试向左移动到隐藏的文本，则无法滚动。 同样，如果在input外部select，则不能向右滚动以查看隐藏的文本。

你唯一的select是全选和删除。

任何解决这个问题的方法？ 我已经上传了不同inputtypes的示例页面，所有这些行为都存在。

小提琴： 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

这里有一些代码会有所帮助。 如果您select的部分大于<input type=text>的大小，select文本效果不佳。 在Safari和Chrome上使用iOS 10.2testingiPad。

 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

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

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