Question

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

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

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

Answer 1

我可以在onKeyDown中输入一个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
}

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

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

1 个答案: