当我按下空格键时，Contenteditable会添加一个 <br>。

Question

我不确定为什么，但如果您启用了可编辑内容的元素，在第一次输入空格时，它会将一个<br>标签附加到该元素中。 如果元素默认就有一个空格（<p contenteditable="true">this is a test</p>），那么就没问题，但是一旦用户按下空格键（甚至复制并粘贴一个空格字符），Firefox会向<p>添加一个 <br _moz_dirty="" />。

有人知道为什么或者有简单的解决方法吗？这是我第一次使用contenteditable，所以很多东西都是新的。目前，我只是使用$('br').remove()，看起来似乎可以解决问题，但如果有人知道原因和防止它出现的正确方法，我会非常感激。

- Jordan

---

这个问题还能再现吗？我在FF中从未遇到过这样的错误。 - YakovL

我遇到了同样的问题，http://jsbin.com/xarirotali/edit?html,css,output 在“some text”的末尾按两次空格，然后在FF中检查p元素，它会添加一个<br>。 - Jonathan Andersson

通过使用CSS隐藏内容可编辑的换行符，可以解决此问题：p[contenteditable="true"] br {display:none;} 但是这也会防止回车键移动到新行。 - jla

@jla 解决了我的问题，谢谢。 - Angry Red Panda

Answer 1

您可以使用以下方法删除末尾的额外BR标签。

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

- Airy

Answer 2

我今天也遇到了这个问题，不知道为什么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)
            }
        } 
    })
}

- Scott Martin

---

当你只想要最后一个<br>时，对子元素进行无用的迭代是没有意义的：[...editableNode.childNodes].pop().tagName == "BR"将检查最后一个子元素是否为<br>。你需要通过一些检查来扩展这个逻辑。问题在于区分所需的<br>和不需要的<br>。 - vsync

如果它能够正常工作，那么它并不是“无用”的。你想要表达的词应该是“不必要的”。感谢你的提示。 - Scott Martin

是的，“unnecessary”抱歉，在我的语言中它的意思是相同的 :) 你可能有一千个子节点，没有必要迭代它们所有。 - vsync

是的，肯定好多了，我记得当我写那段代码时并不是很满意，但不知道有更简洁的方法。扩展childNodes而不是迭代是一个聪明的举动，这没有想到过我。干杯。 - Scott Martin

Answer 3

你可以用CSS非常简单地实现这个功能。

HTML

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

CSS

span#amt br {
    display: none;
}

- Hassan Khan

---

这也将显示用户输入回车时的任何新行（none）。 - Airy

Answer 4

当用户使用回车键时，我使用 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
}

- Scott Messinger

---

我尝试了这种方法，但是Chrome给了我这个错误：Uncaught ReferenceError: e is not defined。你知道为什么吗？ - Tri Nguyen

你无法通过 e.preventDefault() 阻止 Firefox 在 <br> 后面添加内容。 - Réjôme

因为这并没有回答问题，所以被踩了。问题具体是关于Firefox在按下空格键而不是回车/换行时添加<br _moz_dirty="" />的情况。 - MushinNoShin

@MushinNoShin 请再仔细阅读我的回答。我提到了如何修改示例以适应问题中提到的用例。 - Scott Messinger

@ScottMessinger 说得好，是我读过去的文字太快了。即使这个建议被采纳，它仍然无法处理粘贴空格字符的情况。 - MushinNoShin