JavaScript-ContentEditable在Firefox上删除尾随空格，但在Chrome上不删除-堆栈溢出

顺晟科技

2022-10-18 13:58:07

117

我有简单的<；p>；元素作为ContentEditable，使用格式化函数动态格式化文本（在输入事件上），并移动文本末尾的插入符号（因为在ContentEditable上更新innerHTML会将插入符号移动到文本的开头）。

所以在Chrome上一切正常，文本在你输入时被格式化，但在使用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);
});

<代码>#内容{边框：实心1px#555；}

<代码><；HTML（>；）<；身体>；<；p ID=“ content ” ContentEditable>；<；/p>；<；/正文>；<；/HTML>；

顺晟科技：

Firefox添加#content { border: solid 1px #555; }在输入空间时，Chrome添加<html> <body> <p id="content" contenteditable> </p> </body> </html>.

您可以将<br>的 属性设置为

下面是工作代码-

white-space

<代码>#内容{边框：实心1px#555；空白：-Moz-pre-space；}

<代码><；HTML（>；）<；身体>；<；p ID=“ content ” ContentEditable>；<；/p>；<；/正文>；<；/HTML>；

上一篇：JavaScript-在head标签下一篇：PHP-WordPress如何在动态

网站建设

Html

JavaScript-ContentEditable在Firefox上删除尾随空格，但在Chrome上不删除-堆栈溢出