使用 contenteditable 编辑框时，Shift+Enter 换行导致文本结构混乱怎么办？

在编辑框中使用 shift+enter 换行导致结构混乱的解决方法

使用 contenteditable="true" 编辑框时，按下 Shift+Enter 换行可能会导致文本结构混乱。这是因为浏览器默认将 Shift+Enter 解释为创建新的段落

，从而在文本中添加多余的空隙。

为了解决此问题，可以使用 JavaScript 检测 Shift+Enter 按键组合并执行以下操作：

使用 insertParagraph 命令

通过使用 insertParagraph 命令，可以在不添加

标签的情况下创建一个新段落。如果检测到 Shift+Enter 按键组合，可以通过 event.preventDefault() 方法阻止默认行为，并使用 document.execCommand('insertParagraph') 插入一个新段落。

以下是修改后的代码示例：

function keyDown(event) {
  if (event.shiftKey && event.keyCode === 13) {
    event.preventDefault();
    document.execCommand('insertParagraph');
    return false;
  }

  document.execCommand('formatblock', false, '<p>');
}

仅在 Chrome 中进行测试

请注意，解决方法仅在 Chrome 浏览器版本 120.0.6099.201 中进行过测试。在其他浏览器中，可能需要不同的方法。

以上就是使用 contenteditable 编辑框时，Shift+Enter 换行导致文本结构混乱怎么办？的详细内容，更多请关注硕下网其它相关文章！