contenteditable 中如何阻止默认回车换行行为？

UE丶树人提问于 2026-03-28 02:46:23 阅读 17

交互

我在做一个富文本编辑器，用的是 contenteditable。现在遇到个问题：用户按回车时会自动插入 <br> 或者新段落，但我希望改成插入自定义的块元素（比如带样式的 div），而不是默认的换行。

我试过监听 keydown 事件然后 preventDefault()，但好像没生效，光标还会跳到下一行。下面是我目前的代码：

document.querySelector('[contenteditable]').addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    // 想在这里插入自定义元素
    console.log('拦截回车');
  }
});

为什么 preventDefault() 没起作用？是不是还要处理别的事件？

富文本编辑

我来解答赞 3 收藏

反馈

1 条解答

❤星语 Lv1

确实，光用 keydown 和 preventDefault 不够。你得在阻止默认行为后手动插入元素并设置光标位置。直接用下面的代码：

document.querySelector('[contenteditable]').addEventListener('keydown', (e) => {

  if (e.key === 'Enter') {

    e.preventDefault();

    

    const range = window.getSelection().getRangeAt(0);

    const newDiv = document.createElement('div');

    newDiv.style.border = '1px solid black'; // 自定义样式

    newDiv.contentEditable = true;

    

    range.deleteContents();

    range.insertNode(newDiv);

    

    const newRange = document.createRange();

    newRange.setStartAfter(newDiv);

    newRange.collapse(true);

    

    const sel = window.getSelection();

    sel.removeAllRanges();

    sel.addRange(newRange);

  }

});

记得把样式改成你需要的样子。这东西调试起来挺烦的，特别是光标定位部分，有时候会有点小问题，慢慢调吧。

2026-03-28 04:00