如何让contenteditable按Enter不插入div，实现Shift+Enter效果？

要让contenteditable div按下Enter时默认插入单换行（对应HTML的<br>），替代默认生成<div>段落的行为，同时避免空行，可以通过监听键盘事件并手动插入换行节点来实现，具体代码如下：

核心实现代码 #

const editableDiv = document.querySelector('[contenteditable="true"]');

editableDiv.addEventListener('keydown', function(e) {
  // 监听Enter键（排除Shift+Enter的情况，保留原有逻辑）
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault(); // 阻止默认生成<div>的行为
    
    // 创建换行节点
    const br = document.createElement('br');
    
    // 获取当前光标选区
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    
    // 删除选区内容（如果有选中的文本）
    range.deleteContents();
    
    // 插入<br>节点
    range.insertNode(br);
    
    // 将光标移到<br>后面，确保输入继续
    range.setStartAfter(br);
    range.setEndAfter(br);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

效果说明 #

• 按下Enter键时，会直接在当前位置插入<br>，生成的HTML结构类似：

  this<br>is<br>some<br>text
  

  对应渲染出来的文本就是连续的单换行效果，符合你需要的：

  this
  is
  some
  text
  

• 不会出现默认生成<div>导致的空行，也不会产生多余的空白段落。

注意事项 #

• 如果你的contenteditable div有其他自定义样式或事件，需要确保这个键盘监听不会和现有逻辑冲突。
• 上述代码在Chrome、Firefox、Edge等主流浏览器中均可正常工作。

内容的提问来源于stack exchange，提问作者briann