5

请多多包涵，但这是一个非常具体的问题，需要一些背景知识，并且是 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>

触摸的函数什么也没做，但是触摸链接会以某种方式改变一些事情，以便我可以再次编辑 contenteditable 字段。我的第一印象是，也许这是一个焦点问题。所以我跟踪了各个元素的重点。没有什么。我什至为踢球设置了焦点，但什么也没发生。

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

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

谢谢

4

1 回答 1

0

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

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

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

于 2012-08-01T22:27:27.893 回答