event.preventDefault() 在内容可编辑的范围内似乎对我不起作用 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，在用户按下键的那一刻被捕获，而不是"after"用户已经按下了键。此外，您应该在控制台中尝试在 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

Answer 2

在Angular中可以像(keydown.enter)="$event.preventDefault()"一样直接使用

<div contenteditable="true" [(ngModel)]="text" (keydown.enter)="$event.preventDefault()" #textarea></div>

event.preventDefault() 在内容可编辑的范围内似乎对我不起作用 div

event.preventDefault() appears to not work for me within a contenteditable div

javascript

angular

dom-events

keyup