Contenteditable 删除了 firefox 上的尾随空格，但在 Chrome 上没有

Question

我有一个简单的

元素作为带有格式化功能的 contenteditable，它即时格式化文本（在输入事件时），并在文本末尾移动插入符号（因为在 contenteditable 上更新 innerHTML 移动插入符号到文本的开头）。

所以在 Chrome 上一切正常，文本在您键入时格式化，但是当使用 Firefox 时，尾随的白色space会在您键入时被删除，所以您不能真正编写两个单独的单词，因为每次您在第一个单词末尾按 space 时，它都会被修剪。

知道为什么 Firefox 上的行为不同吗？

const content = document.getElementById('content');
content.innerHTML = 'Type text here';

function formatText(text) {
  return text.replaceAll('#', '<b>#</b>');
}

content.addEventListener('input', () => {
  content.innerHTML = formatText(content.innerText);

  let range = document.createRange();
  range.selectNodeContents(content);
  range.collapse(false);
  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
});

#content {
  border: solid 1px #555;
}

<html>

  <body>

    <p id="content" contenteditable>
    </p>

  </body>

</html>

Answer 1

Firefox 在输入 space 时添加 <br>，而 Chrome 添加  。

您可以将 contenteditable 的 white-space css 属性设置为 -moz-pre-space 来解决这个问题。

下面是工作代码-

const content = document.getElementById('content');

function formatText(text) {
  return text.replaceAll('#', '<b>#</b>');
}

content.addEventListener('input', () => {
  content.innerHTML = formatText(content.innerText);

  let range = document.createRange();
  range.selectNodeContents(content);
  range.collapse(false);
  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
});

let data = '';
content.innerHTML = 'Type text here';

#content {
  border: solid 1px #555;
  white-space: -moz-pre-space;
}

<html>

<body>

  <p id="content" contenteditable>
  </p>

</body>

</html>

Contenteditable 删除了 firefox 上的尾随空格，但在 Chrome 上没有

Contenteditable removes trailing whitespaces on firefox, but not on Chrome

html

javascript

css

contenteditable