DOM元素莫名其妙地出现了

DOM elements appearing inexplicably

本文关键字：元素 莫名其妙 DOM      更新时间：2023-09-26

我在开发的一个web应用程序中遇到了一个奇怪的错误，我可以在Chrome和Safari中重现，但不能在Firefox中重现。

要查看错误，请访问www.lastcalc.com并键入一个大写字符。通过DIV.question（contentEditable设置为true的DIV）上的"keydown"事件的侦听器，该字符将立即用白色"button"css突出显示。这是由locatus.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"元素的类，当我按下退格键时，它会被删除。

这里似乎有某种浏览器的巫毒论在某种程度上出错了——有人能对此有所了解吗？

ps。如果有人想知道这个网站是什么，你可以在这里找到更多。

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

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

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

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

相关文章：