时间戳

首页 > 解决方案 > event.preventDefault() 在 contenteditable div 中似乎对我不起作用

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

问题描述

我有一些简单的 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>

标签： javascriptangulardom-eventskeyup

解决方案

使用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)">

堆栈闪电战

推荐阅读