テキストの値を取得（貼り付け）イベント後に入力

Question

テキスト入力フィールドの内容を何かをペーストした後に取得しようとしています。データを取得するにはどうすればよいですか？ keyupイベントに使用した$event.target.valueでの私のアプローチは機能しません。 Ctrl + Vで貼り付けると、それはkeyupイベントのために機能しますが、ブラウザのコンテキストメニューから何かをペーストしようとすると、うまくいきません。ここで

は非常に単純なコードサンプルです：

@Component({ 
    selector: 'my-app', 
    template: `<input type="text" [ngModel]="value" (paste)="pasteEvent($event)" (keyup)="keyupEvent($event)"> 
    <br>{{result}}` 
}) 
export class AppComponent { 
    public result: string; 

    public pasteEvent($event: any) { 
    this.result = $event.target.value; 
    console.log('paste: '+ $event.target.value); 
    console.log($event); 
    } 

    public keyupEvent($event: any) { 
    this.result = $event.target.value; 
    console.log('keyup: '+ $event.target.value); 
    } 
} 

Answer 1

ユーザーが値を編集すると、何か同じように過去をするとき、あなただけのモデルが更新されますしたい場合は、あなただけの

(ngModelChange)="pasteEvent($event)" 

を使用することができます

またはあなたが実際に過去のイベントを処理したい場合は

[(ngModel)]="value" 

を結合双方向直接、イベントがclipboardData性質を持っている必要があります。

console.log($event.clipboardData); 

貼り付けたテキストを取得するには、getDataを使用することができます。

console.log($event.clipboardData.getData('Text')); 

は

• JavaScript get clipboard data on paste event (Cross browser)
• https://developer.mozilla.org/en-US/docs/Web/Events/paste

も参照してください。