2017-08-09 9 views
0

Angular 4/2のキーストロークイベントを同期して実行するにはどうすればよいですか? このコードを実行すると、キーが常に発火順に実行されるわけではありません。Angular Keystrokesが同期して動作しないのはなぜですか?または、どうすれば同期させることができますか?

テンプレート

<div 
    contenteditable="true" 
    (keydown)="divKeyDown($event)" 
    (keyup)="divKeyUp($event)"> 
</div> 

コンポーネント

divKeyDown(event) { 
    console.log('Keydown'); 
    // OFTEN GETS FIRED BEFORE KEYUP OF PREVIOUS STROKE 
} 
divKeyUp(event) { 
    console.log('Keyup'); 
} 
+0

このPlnkrのようなものが必要ですか? https://plnkr.co/edit/GYWY2HxFz41tmiXswFNs?p=preview(Ctrlキーを押す)、@HostListenerを使用していることを確認します。 –

+0

@JancoBoscan OPと同じ問題が発生しました(https://plnkr.co/edit/xN38ZlziYdqYI8qJsDDZ?p=preview)。 JustinLevine私は、この機能はkeyupとkeydownが別々のイベントストリームであるために起こると仮定します。だから私はそれについて本当に何かがあるかどうかわからない。あなたは何を達成しようとしていますか? – LLai

+0

@LLai EventEmitterはバックグラウンドで使用されていますが、そのコンストラクタにはisAsyncのトグルがあります。私はそれが非同期ではないことを通知することが可能かどうか疑問に思います。私のcontenteditableで、私はkeydownの入力を制御し、keyupイベントのキャレット位置をリセットします。同期して発射しないと、キーボードイベントが速やかに発射されたときに倒れます。 –

答えて

0
  • キーは文字通りアップになると、他のキーストロークの心配を持っていないときkeyUpイベントにのみ起動されます。

  • keypownは、keydownの直後には常に起動され、別のキーストロークの前には常に発生しないので、このシナリオではより良いイベントになります。

  • これはデフォルト動作であり、角度には直接関係しません。

でもバニラJSで、同じ行動が観察された:

document.getElementById('main').addEventListener('keydown', event => { 
    console.log('keydown'); // FIRED ONCE 
}); 
document.getElementById('main').addEventListener('keypress', event => { 
    console.log('keypress'); // FIRED AFTER KEYDOWN 
}); 
document.getElementById('main').addEventListener('keyup', event => { 
    console.log('keyup'); // FIRED WHEN THE KEY HAS LITERALLY BEEN RELEASED 
}); 

(このシナリオでは、私は直接「のkeydown」の後の状態の変化を処理するために、角度の「ngAfterViewChecked」ライフサイクルフックを使用していましたイベントが完了しました)

関連する問題