FireFox 上的 contentEditable div 多行问题

Question

我有一个 `contentEditable="true" 的 div

<div id="msgInput" contentEditable="true"></div>

当用户输入并按下“输入”时，它会将用户输入的内容附加到另一个 div

<div id="output"></div>

但我需要它，以便用户可以键入多行（使用 shift+enter），而无需在“enter”键上触发“keydown”事件

我是这样实现的：（请注意，我添加了“输入”事件侦听器，因为我需要保存用户在状态变量中键入的内容）

let input = document.getElementById('msgInput');
let output = document.getElementById('output');
let state = '';

input.addEventListener('input', function(event) {
    state = event.target.textContent;
});

input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.target.innerHTML = '';        
        output.innerHTML = state;
        event.preventDefault();
      }
});

在 Chrome 上，这工作正常，

例如，如果我输入“first”

然后shift+enter，

然后输入“秒”

然后按回车，它会像这样附加：

first
second

这正是我想要的。

但在firefox上，它附加在一行中（合并为一个单词）

firstsecond

我需要它在 Firefox 中具有与 chrome 中相同的行为

这是一个小提琴 https://jsfiddle.net/Lrnx24tb/2/

Answer 1

您可以尝试将textContent 替换为innerText：

input.addEventListener('input', function(event) {
    state = event.target.innerText;
});