javascript - event.preventDefault() 在 contenteditable div 中似乎对我不起作用

Question

我有一些简单的 Angular 7.x 代码，基本上使用一个 contenteditable div，我试图在用户按下 [ENTER] 键时阻止默认操作 - 代码看起来很好，但无论我尝试什么执行默认操作，例如将光标移动到我试图防止发生的下一行。

我做错了什么？

//组件代码

onTextChange(event): void {
    // keyCode for the Enter key is 13
    if (event.keyCode === 13) {
        console.log('enterPressed');
        event.stopPropagation();
        event.preventDefault();
    }
}

//模板代码

<div contenteditable="true" [(ngModel)]="text" (keyup)="onTextChange($event)" (change)="onTextChange($event)" #textarea></div>

Answer 1

使用 keypress 或 keydown，它在用户按下键的那一刻被捕获，而不是“在”用户已经按下键之后。此外，您应该在控制台中尝试在 div 上使用 ngModel 时出错。您可以改为使用 $event.target.innerText 捕获该值:

onTextChange(event): void {
  // keyCode for the Enter key is 13
  if (event.keyCode === 13) {
    console.log('enterPressed', event.target.innerText);
    event.preventDefault();
  }
}

模板:

<div contenteditable="true" (keydown)="onTextChange($event)">

STACKBLITZ