Todo应用可编辑Span回车生成Div问题求助

直接通过事件监听和手动干预实现需求，以下是具体方案：

核心解决方案：拦截回车事件，手动插入<br> #

监听span的keydown事件，阻止回车的默认行为，手动插入<br>标签并调整光标位置，确保后续输入在新行：

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

editableSpan.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    const br = document.createElement('br');
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    
    range.deleteContents();
    range.insertNode(br);
    // 将光标定位到<br>标签之后
    range.setStartAfter(br);
    range.setEndAfter(br);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

辅助CSS设置 #

给span添加以下CSS，确保它能自动增高并保留换行格式：

[contenteditable="true"] {
  display: block;
  white-space: pre-wrap;
  min-height: 1.5em; /* 确保初始状态有高度 */
}

兜底处理：清理意外生成的块级元素 #

如果浏览器在粘贴或其他操作中仍生成div、p等块级元素，可通过input事件清理：

editableSpan.addEventListener('input', function() {
  const blocks = this.querySelectorAll('div, p');
  blocks.forEach(block => {
    // 将块级元素的内容移到span中，再删除块元素
    while (block.firstChild) {
      this.insertBefore(block.firstChild, block);
    }
    block.remove();
  });
});

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