javascript - 当我点击空格时，Contenteditable 添加了一个

Question

我不确定为什么，但如果你有一个启用了 contenteditable 的元素，当你第一次输入空格时，它会附加一个 <br>标记到元素中。如果元素中默认有一个空格 ( <p contenteditable="true">this is a test</p> )，那没问题，但是只要用户点击那个空格键(甚至复制+粘贴一个空格字符)，Firefox 就会添加一个 <br _moz_dirty="" />到 <p> .

有没有人知道原因或简单的解决方法？这是我第一次玩 contenteditable，所以很多东西对我来说都是新的。目前，我正在使用 $('br').remove()这似乎有效，但如果有人知道的话，我希望得到解释和正确的预防方法。

Answer 1

我今天遇到了这个，也不知道为什么Firefox会这样。我是这样处理的。

function zapTrailingLinebreak (editableNode) {
    let children = Array.from(editableNode.childNodes)

    children.forEach(child => {
        if (children.indexOf(child) == children.length - 1) {
            if (child.tagName && child.tagName === "BR") {
                editableNode.removeChild(child)
            }
        } 
    })
}