当我点击空格时，Contenteditable 添加了一个 答案

【问题标题】：Contenteditable adds a when I hit space当我点击空格时，Contenteditable 添加了一个 
【发布时间】：2011-05-01 14:38:22
【问题描述】：

我不知道为什么，但是如果你有一个启用了 contenteditable 的元素，当你第一次输入一个空格时，它会在元素中附加一个  标签。如果元素默认有空格（this is a test），那会很好，但只要用户点击空格键（甚至复制+粘贴空格字符），Firefox 就会添加一个  .

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

【问题讨论】：

这仍然可以重现吗？我在FF中从来没有遇到过这样的bug
我遇到了同样的问题，jsbin.com/xarirotali/edit?html,css,output 在“一些文本”的末尾按两个空格并检查 FF 中的 p 元素，它会添加一个
。
解决此问题的一种方法是使用 CSS 隐藏 contenteditables 中的中断：p[contenteditable="true"] br {display:none;} 但是这也会阻止回车移动到新行。
@jla 解决了我的问题，谢谢。

标签： javascript jquery contenteditable

【解决方案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)
            }
        } 
    })
}

【讨论】：

当你想要的只是最后一个   时，对孩子的无用迭代：[...editableNode.childNodes].pop().tagName == "BR" 将检查最后一个孩子是否是  。您需要通过一些检查来扩展此逻辑。问题在于区分想要的  和未注册的。
如果它有效，它不是“无用的”。你的意思是“不必要的”。感谢您的提示。
是的，“不必要”对不起，在我的语言中它的意思是相同的 :) 你可能有一千个子节点，没有必要全部迭代它们
是的，肯定好多了，我记得当我编写该代码时对它不太满意，但不知道一种紧凑的方式。传播 childNodes 而不是迭代是我没有想到的明智之举。干杯。

【解决方案2】：

当用户回车时，我使用preventDefault。也许你可以修改它以在用户使用空格键时返回一个正常的空格。

if(e.keyCode==13 && e.shiftKey){ //enter && shift
    e.preventDefault(); //Prevent default browser behavior
    //this.html(this.html+"<br>");
}
if(e.keyCode==13){ //enter
    e.preventDefault(); //Prevent default browser behavior
}

【讨论】：

我试过这个方法，但 Chrome 给我这个错误：Uncaught ReferenceError: e is not defined。你知道为什么吗？
你不能阻止 Firefox 用 e.preventDefault() 附加
投了反对票，因为这不能回答问题。问题是特定于 firefox 在按 space 时添加   而不是输入/返回。
@MushinNoShin 再次尝试阅读我的答案。我提到了如何修改示例以适应问题中提到的用例。
@ScottMessinger 公平点，我过快阅读过去的文字是我的错。在粘贴空格字符时，此建议仍然无法处理。

【解决方案3】：

您可以使用 CSS 以非常简单的方式做到这一点

HTML

<span id="amt" contenteditable="true">100000</span>

CSS

span#amt br {
    display: none;
}

【讨论】：

这也将显示（无）用户输入的任何新行

【解决方案4】：

你可以通过这个删除多余的BR标签

let lastTag = document.querySelector('#yourDiv').lastElementChild;
if(lastTag && lastTag.tagName == "BR") lastTag.remove();

【讨论】：