如何阻止 contentEditable 在回车时添加跨度答案

【问题标题】：How to stop contentEditable from adding spans on carriage return如何阻止 contentEditable 在回车时添加跨度
【发布时间】：2017-10-14 00:54:04
【问题描述】：

我正在修改 contenteditable 的内部 html 以将 span 包裹在用户键入的某些文本周围。这很好用，除了每次用户创建换行符时，新行也会以span 的形式出现，其 id 和样式与他们刚刚输入的 span 相同。

我见过prevent contenteditable mode from creating <span> tags，但在这种情况下，他们正试图删除所有跨度（或者至少这是每个人都建议他们这样做的）。然而，我需要我有意创建的跨度，我只是不希望它们成倍增加。

我现在使用的是 Chrome 61，但我需要不会对 Chrome、FireFox、Edge、IE 11 或 Safari 产生问题的解决方案，因为我需要支持这些浏览器。

【问题讨论】：

您使用什么代码将文本包装在跨度中？你的代码有问题吗？
我认为不可能。我只向内部 html 添加一个跨度。当我阅读 html 时，我在按 Enter 之前看到了单个跨度，并在新行上看到另一个具有重复属性的跨度。

标签： javascript html contenteditable

【解决方案1】：

我可以在 onKeyDown 中为 enter 键添加一个 span-killer，如下所示：

document.addEventListener('keydown', function(event) {
    if(event.keycode == 13) {
        var span = window.getSelection().anchorNode.parentNode;
        if(span.id === "spanThatShouldntAppearAfterPressingEnter"){
            unwrap(span);
        }
    }
}, true);
function unwrap(el){
    var parent = el.parentNode; // get the element's parent node
    while (el.firstChild){
        parent.insertBefore(el.firstChild, el); // move all children out of the element
    }
    parent.removeChild(el); // remove the empty element
}

我真的不想这样做，谁能想到更优雅的东西？

【讨论】：