キーボードイベントはcontenteditable内のコンポーネント内でバインドされます

div [contenteditable = true]内のコンポーネントでキーボードイベントを聴こうとします。なぜそれは働いていないのですか？私は問題がないことを発見し：キーボードイベントはcontenteditable内のコンポーネント内でバインドされます

UPDATEが動作しない - -

のkeydown、keyUpイベント、キー入力を仕事

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

クリック：

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

テンプレートをplunk角度2に適用するその関連する関連性D Keypress event on nested content editable (jQuery)

出典

2017-02-28 Шлыков Сергей

はこれを試してください：あなたのcomponent.ts

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

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

インサイド

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

あなたの代わりにGet User input from $event

Plunkr Example

出典

2017-02-28 04:11:44

に気づきました。これはどれも動作しません –

@ШлыковСергейはちょうど私の答えにplunkrの例を追加しました。 –

それは私が何をしようとしていません。目的はcontenteditableの**子要素**にバインドすることです。それ自身を満足させることではない。 –