keyboard events binding in component within contenteditable

Question

I try to listen to keyboard events on a component inside div[contenteditable=true]. why is it not working?

plunk http://plnkr.co/edit/Tjmihqc1r5UrS3XJ3QQ0?p=preview

template:

<div contenteditable="true"> <h2 (keydown)="log($event)" (keyup)="log($event)" (keypress)="log($event)" (click)="log($event)">Hello {{name}}</h2> </div>

click - work

keydown,keyup,keypress - not work

UPDATE: I discovered that the problem does not apply to angular 2 its contenteditable related Keypress event on nested content editable (jQuery)

Code Ratchet Code Ratchet · Accepted Answer · 2017-02-28T04:11:44

Try this:

@Component({
  selector: 'my-app',
  template: `
  <div contenteditable="true" (keyup)="onKey($event)"> 
    <h2>Hello {{values}}</h2>
  </div>
  `,
})

Inside your component.ts

export class App {
  name:string;
  log = [];
  values = '';
  constructor() {
    this.name = 'Angular2'
  }

  onKey(event: any) { 
    console.log(event);
    this.values += event.key + ' | ';
  }
}

According to the Angular2 documents you need to use Keyup instead of Keydown Get User input from $event

Plunkr Example

keyboard events binding in component within contenteditable

2 Answers