Vue.js如何阻止contenteditable元素中回车添加新行？

我之前也踩过这个坑！用@keyup.enter.prevent没效果是因为浏览器在keydown阶段就已经执行了添加新行的默认行为，等keyup事件触发时，换行操作早就完成了，这时候再阻止已经晚了。试试下面这些靠谱的方案：

1. Vue项目：改用@keydown.enter.prevent #

直接把事件换成keydown，在按键按下的瞬间拦截默认行为，这是最直接的解决方式：

<div contenteditable="true" @keydown.enter.prevent>
  在这里输入内容，按回车不会自动换行啦
</div>

如果遇到事件冒泡导致的拦截失效，可以加上.stop修饰符，变成@keydown.enter.stop.prevent，确保事件不会向上传递干扰其他逻辑。

2. 原生JavaScript场景 #

如果不是Vue项目，直接监听keydown事件，手动阻止默认行为即可：

const editableDiv = document.querySelector('[contenteditable="true"]');
editableDiv.addEventListener('keydown', function(e) {
  // 用e.key判断更符合现代标准，keyCode已被废弃
  if (e.key === 'Enter') {
    e.preventDefault();
    // 这里可以添加自定义逻辑，比如插入空格、触发其他操作等
  }
});

3. 极端情况：手动在事件函数中阻止 #

如果上面的修饰符方案还是不生效（比如组件嵌套、其他事件监听冲突），可以直接在事件处理函数里手动调用阻止方法：

<div contenteditable="true" @keydown.enter="handleEnterPress">
  测试输入内容
</div>

<script setup>
const handleEnterPress = (e) => {
  e.preventDefault(); // 阻止换行的默认行为
  // 可选：如果需要阻止事件冒泡，添加 e.stopPropagation();
};
</script>

另外要注意：如果你的div设置了white-space: pre这类强制保留换行的CSS样式，可能需要额外调整样式，但大部分常规场景下，上面的方法都能解决问题。

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