时间戳

首页 > 解决方案 > FireFox 上的 contentEditable div 多行问题

javascript - FireFox 上的 contentEditable div 多行问题

问题描述

我有一个 `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/的小提琴

标签： javascripthtml

解决方案

您可以尝试替换textContent为innerText：

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

推荐阅读