2015-12-08 10 views
33

は、それは角度2で(キープレス)を使用するとき押されたキーを見つけることは可能ですか?(キープレス)からどのキーを押しなさいangular2

など。

<input type=text (keypress)=eventHandler()/> 

public eventHandler() { 
    //Some code 
    console.log(keyPressed); 
} 

編集:私の命名規則はちょっとだったようだ。私はAngularJS 2を意味するわけではありませんでした。私はType2でAngular 2.0を意味しました。あなたのイベントハンドラに

+0

を使用するには? – azad

答えて

67

パス$event$eventはDOM KeyboardEventです。

<input type=text (keypress)="eventHandler($event)"> 

eventHandler(event) { 
    console.log(event, event.keyCode, event.keyIdentifier); 
} 

あなたが欲しいどのKeyboardEventのプロパティわかっている場合は、イベントハンドラの中にそれを渡すことができます。

<input type=text (keypress)="eventHandler($event.keyCode)"> 

eventHandler(keyCode) {...} 
+8

これはすべてのイベントを検出しません。例えば、矢印キーやエスケープではありません。しかし(keydown)を使ってそれらのすべてを得ることができます。 –

+2

event.keyは今使用しているようですが、 '0'、 'a'、 'ArrowLeft'などの文字列を与えます。event.keyCodeを使用すると落胆します。 – bob

+0

関数AvoidSpace(イベント:any){ var k =イベント? event.which:window.event.keyCode; if(k == 32)がfalseを返す。 } 上記は、ユーザーが入力ボックスにスペースを入力しないようにするために使用したコードです。私はこれをangular2で実装しています。私はキーコードにエラーが発生しました。 "プロパティ 'keycode'がタイプ 'イベント'に存在しません。 any"。私は何をすべきか? –

12
@Component({ 
    selector: 'key-up3', 
    template: ` 
    <input #box (keyup.enter)="onEnter(box.value)"> 
    <p>{{value}}</p> 
    ` 
}) 
export class KeyUpComponent_v3 { 
    value = ''; 
    onEnter(value: string) { this.value = value; } 
} 

それとも、このように使用...に基づいて

<input #box (keyup.enter)="onSubmit(form.value)"> 
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> 
+1

良い解決策。コンポーネントのキーコードなどを確認する必要はありません。 – perry

2

答えに書かれたコメント:

これはすべてのイベントを検出しません。例えば、矢印キーやエスケープではありません。しかし(keydown)を使ってそれらのすべてを得ることができます。

最善の解決策は、すべてのイベントバックスペースの両方を取得し、削除したり、何でもキーは、ちょうどあなたがangularjsを使用している(入力)

<input type=text (input)="eventHandler($event.keyCode)"> 

eventHandler(keyCode) {...} 
関連する問題