Question

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

有没有人知道为什么或简单的修复？这是我第一次玩满足感，所以很多这对我来说都是新的。目前，我只是使用似乎有效的，但如果有人知道，我会喜欢一种解释和正确的方法来阻止它。

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)
            }
        } 
    })
}

Answer 2

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

HTML

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

CSS

span#amt br {
    display: none;
}

Answer 3

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

当我击中太空时，Contenteditable会增加一个

3 个答案: