javascript - 文本丢失样式(即使 css 显示它应该具有它)，但如果代码在控制台上单步执行(包括 jsfiddles)，则不会丢失样式

Question

(到目前为止，我只确认 MacOS Mojave 上的 Safari 12.1.2 会发生这种情况)

所以我有一个可内容编辑的 div，其中有一个样式化的跨度(红色)和一些文本。还没有什么奇怪的。

但是，当我对文本进行一些操作时(将所有文本仍然保持在相同样式的范围内)，即使检查 DOM 显示它应该设置样式，某些文本也会丢失其样式(红色)。

Here's a jsfiddle illustrating the issue above:

1: https://jsfiddle.net/tx71pqmv/5/

$('#editable').keypress((event) => {
    if (event.key != 'Enter' || !event.shiftKey)
        return;
    event.preventDefault()
    let sel = window.getSelection()
    let range = sel.getRangeAt(0)
    let newLine = $('<span>')
        .addClass('br')
        .attr('contenteditable', 'false')[0]
    range.startContainer.splitText(range.startOffset) // 1
    range.insertNode(newLine) // 2
})

奇怪的是，这个问题是在非常特定的条件下发生的。

例如，如果我使用调试器单步执行代码，或者使用 setTimeout 将执行延迟 1 毫秒 ( see jsfiddle #2 )，那么一切都会按预期运行。

或者，即使只是删除包含 div 上的::before 伪元素(甚至样式化的跨度)也可以解决问题( see jsfiddle #3 )。这应该是完全无关的!

是否有一个更干净的解决方案来解决这个问题，而不涉及损害CSS或使用setTimeout？

编辑:在第一个 jsfiddle 和第二个 jsfiddle 上按 Shift+Enter 后添加 DOM 结构的屏幕截图。两者的 DOM 结构看起来相同，但右侧的没有将样式应用于文本节点之一:

Answer 1

此处 shift+Enter 和 Enter 对于 #editable div 的行为不同

• Enter 正在创建 #editable div 的新子级 (div)意味着每次按 Shift Enter 时都会有更多 child
• 但是 Shift + Enter 正在 child div > span 内创建新行

浏览器对 contenteditables 的行为有所不同

正如 MDN 所说

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers.

阅读此内容以获取更多信息: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

使用enter创建新的div