在 iphone 中滚动时光标溢出 - safari答案

【问题标题】：Cursor gets overflow when scrolling in iphone - safari在 iphone 中滚动时光标溢出 - safari
【发布时间】：2015-04-16 11:12:47
【问题描述】：

我已经研究并尝试了很多来解决这个问题，但我无法找到解决方案。

我有这样的文本区域

CSS

.textarea{

    background-color: #ffffff;
    border: 1px solid #bbd7eb;
    color: #5e7891;
    font-family: "Roboto",Arial,"Nimbus Sans L","Helvetica CY",sans-serif;
    font-size: 14px;
    font-weight: normal;
    max-width: 560px;
    min-height: 100px;
    padding: 5px;
    resize: none;
    width: 100%; 
    -webkit-overflow-scrolling: touch;

}

HTML

<textarea class="textarea" name="" title=""></textarea>

在 iphone 中，当我输入 long para 并滚动 textarea 时，光标会离开 textarea 边框。

谁能帮我解决这个问题？

【问题讨论】：

视口宽度是多少？难道是它低于 570px (5 + 560 + 5) 并且文本框超过了它的大小（让文本框的最右边部分隐藏在视图之外）？
我用过这个 -

标签： jquery ios iphone html css

【解决方案1】：

你想达到什么目标？

我已经为你做了小提琴，所以你可以更详细地描述一下？

https://fiddle.jshell.net/mkdizajn/7m54bk5v/show/light/

此属性来自：-webkit-overflow-scrolling？这是不对的..

我添加了溢出：隐藏；是吗？

【讨论】：

-webkit-overflow-scrolling 仅适用于 iPhone：developer.mozilla.org/en-US/docs/Web/CSS/…
谢谢但溢出：隐藏对我不起作用，因为我也需要滚动。我从一些博客中找到了 -webkit-overflow-scrolling 属性，但它也没有用。
我也删除了该属性并检查了但仍然存在同样的问题
我认为您需要包含一些库来滚动某些 div 或类似内容中的文本.. 看看这个.. github.com/vitch/jScrollPane
我还检查了其他网站的 textarea 并且在那里 textarea 光标工作正常。在其他网站中，光标在滚动期间停留在同一位置。

【解决方案2】：

我在 iPhone 5（Safari 和 Chrome 上）上试用了您的手机壳。

在 Safari 上

我所能发现的是，当您滚动触摸文本区域上的空白区域时，它不是滚动内容，而是滚动整个页面。

但是当我尝试通过触摸内容来滚动时，它运行得很顺利。

注意：它在 Chrome 上完美运行

【讨论】：

是的，它在 chrome 中运行良好。实际上我正在滚动文本区域的内容而不是页面。当我这样做时，光标出现在 textarea 边框上或下方取决于滚动。

【解决方案3】：

我找到了解决方案并在

上在 iOS 8.1 上进行了测试

cursor out of control in textarea on IOS8 safari

选择的光标被重置并移动到输入的末尾。

【讨论】：