2015-12-08 15 views
33

Angular 2'de (tuşa basma) kullanırken hangi tuşa basıldığını bulmak mümkün mü?(tuşa basma) angular2'den basılan anahtarı alın

E.g.

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

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

Düzenleme: Adlandırma kuralımın biraz kapalı olduğu görünüyor. AngularJS 2 demek istemedim, tipcript ile Angular 2.0 demek istedim.

+0

kullanılır? – azad

cevap

67

Olay işleyicinize $event verin. $event, DOM KeyboardEvent'dur.

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

eventHandler(keyCode) {...} 
+8

bu, tüm olayları algılamaz. örneğin ok tuşları veya kaçış. ama hepsini almak için (tuş) kullanabilirsiniz. –

+2

event.key şimdi kullanmak için bir tane gibi görünüyor, '0', 'a', 'ArrowLeft', vb. Gibi bir dize verir. Event.keyCode kullanımı önerilmez. – bob

+0

function AvoidSpace (event: any) { var k = olay? event.which: window.event.keyCode; (k == 32) false değerini döndürürse; } Yukarıda, kullanıcının giriş kutusuna boşluk girmesini engellemek için kullandım. Bunu açısal2'de uygularım. Anahtar kod üzerinde hata alıyorum, "Özellik 'anahtar kodu', 'Olay' türünde yok. any". Ne yapmalıyım? –

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; } 
} 

Ya da böyle kullanmak ..

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

Güzel çözüm. Bileşenlerde anahtar kodları vb. Kontrol etmeye gerek yok. – perry

2

dayanarak: Eğer istediğiniz KeyboardEvent mülkiyet biliyorsanız

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

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

, etkinlik işleyicisi içine geçebilir Cevabın üzerinde yapılan yorum:

Bu, tüm olayları algılamıyor. örneğin ok tuşları veya kaçış. ama hepsini almak için (tuş) kullanabilirsiniz.

iyi çözüm tüm etkinlikler backspace hem olsun ve silme ya da her türlü anahtar, sadece angularjs kullandığınız (giriş)

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

eventHandler(keyCode) {...} 
İlgili konular