event.preventDefault (), кажется, не работает для меня в contenteditable div - PullRequest
Новая
       21

event.preventDefault (), кажется, не работает для меня в contenteditable div

3 голосов
/ 23 сентября 2019

У меня есть некоторый простой код 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>

Ответы [ 2 ]

4 голосов
/ 23 сентября 2019

Используйте keypress или 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)">

STACKBLITZ

2 голосов
/ 23 сентября 2019

В Angular вы можете напрямую использовать его как (keydown.enter)="$event.preventDefault()"

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