1

我在我一直在处理的 Web 应用程序中遇到了一个奇怪的错误，我能够在 Chrome 和 Safari 中重现，但不能在 Firefox 中重现。

要查看错误，请访问www.lastcalc.com并输入一个大写字符。通过 DIV.question 上的“keydown”事件的侦听器（contentEditable 设置为 true 的 DIV），该字符将立即以白色“按钮”css 突出显示。这由 locutus.js 中的 highlightSyntax 函数执行，并依赖 Rangy 库在突出显示期间跟踪光标位置。

到目前为止一切顺利，但现在点击删除。突然在 Safari 中出现以下结构，光标位于中间的 br 元素（视觉上文本居中并获得颜色 #606060）：

<div style="text-align: center;">
    <font class="Apple-style-span" color="#606060">
        <span class="Apple-style-span" style="font-size: 14px;">
           <br/>
        </span>
    </font>
</div>

在 Chrome 中略有不同：

<div style="text-align: center;">
    <font color="#606060">
        <span style="font-size: 14px;">
            <br/>
        </span>
    </font>
</div>

据我所知，我的代码中没有创建任何这些元素，但它们出现了。在我的代码中唯一提到#606060 颜色的地方是在“white”类的定义中的highlighting.css 中，该类是分配给“span”元素的类，当我按退格键时该元素将被删除。

似乎这里发生了某种浏览器巫术，但不知何故出了问题 - 任何人都可以对此有所了解吗？

附言。如果有人想知道这个网站是什么，您可以在这里找到更多信息。

编辑：经过一些谷歌搜索，这似乎是webkit 中的一个错误，所以现在的问题是：我该如何解决它？

4

1 回答 1

1

我找到了以下解决方法，它基本上涉及使用 JQuery 删除有问题的 div 和 span，同时确保不删除 Rangy 用来跟踪光标位置的 span，每次有 keyup 事件时我都会这样做可编辑的 div：

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

它解决了我的问题，但似乎实际的错误在 WebKit 中。

于 2012-01-26T13:59:32.323 回答