Question

请耐心等待，但这是一个非常具体的问题，需要一些背景知识，这是iPad iOS 5.0特有的问题

想象一下，创建一个重新组合IDE的HTML页面。左侧是资源管理器，右侧是使用contenteditable字段的编辑字段。

这是一个简化的结构：

<div id="left">
<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
</div>
<div id="content">
    <div id="editable" contenteditable="true">
    edit here...
    </div>
</div>

想象一下，左侧场地有数百个你好。我使用iScroll4库将这些元素转换为滚动系统。使用触摸滚动效果很好。

这是问题所在。假设我刷新页面，开始编辑，添加或删除文本。然后我轻弹左侧看另一个元素。如果我然后触摸编辑字段，我就无法添加文字。

我在内容字段上方添加了一个链接元素

<a href="javascript:touched()">touch me</a>

触摸的功能什么都不做，但触摸链接会以某种方式更改内容，以便我可以再次编辑可信任的字段。我的第一印象是，这可能是一个焦点问题。所以我追踪了各种元素的重点。没有。我甚至为踢球设定了焦点，也没有发生任何事情。

我想，也许是丢失的关键序列？我添加了一个document.onkey事件，并且正在捕获所有关键事件。我踢的时候添加一个方法调用来将显式焦点设置为可编辑字段。什么都没有。

在这一点上，我完全疲惫不堪，因为我不知道为什么这个问题变得无法使用。让用户重新点击链接以允许焦点是IMO一个愚蠢的想法。有人遇到过这个问题吗？有人有解决方案吗？

由于

Answer 1

您可以尝试使用CSS指针事件，以便在触摸可信任元素时不会滚动：

*[contenteditable=true]{
  pointer-events:none;
}

我不知道这是否适用于触摸屏，但值得一试。

在另一个div上使用touch时，contenteditable不起作用

1 个答案: