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

使用keypressor keydown，在用户按下键的那一刻被捕获，而不是“在”用户已经按下键之后。此外，您应该在控制台中尝试ngModel在 div上使用时出错。您可以使用以下方法捕获该值$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)">

闪电战