Question

我有一个带有`contentEditable =“ true”的div

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

当用户键入内容并按回车键时，它会将用户键入的内容附加到另一个div

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

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

这是我实现此目标的方式：（请注意，我添加了'input'事件监听器，因为我需要在状态变量中保存用户输入的内容）

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，

然后输入“ second”

，然后按Enter，它将像这样添加：

first
second

那正是我想要的。

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

firstsecond

我需要在firefox中使其具有与chrome中相同的行为

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

Answer 1

您可以尝试将var myRequest = { id: 123, name: "Some name", date: new Date("9999", "12", "31", 23, 59, 59).toISOString() };替换为textContent：

innerText

在FireFox上的contentEditable div多行问题

1 个答案: