2015-12-08 5 views
33

क्या यह पता लगाना संभव है कि अंगुलर 2 में (कीप्रेस) का उपयोग करते समय कौन सी कुंजी दबाई गई थी?प्राप्त करें कि कौन सी कुंजी दबाया गया है (कीप्रेस) कोणीय 2

उदा।

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

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

संपादित करें: लगता है मेरी नामकरण सम्मेलनों थोड़ा दूर रहे थे। मेरा मतलब AngularJS 2 नहीं था, मेरा मतलब टाइपरक्रिप्ट के साथ कोणीय 2.0 था।

+0

का उपयोग आप AngularJS का उपयोग कर रहे हैं? – azad

उत्तर

67

अपने ईवेंट हैंडलर को $event पास करें। $event एक डोम 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

यह सभी घटनाओं का पता नहीं लगाता है। उदाहरण के लिए तीर कुंजी या भागने नहीं। लेकिन आप उन सभी को प्राप्त करने के लिए (कीडाउन) का उपयोग कर सकते हैं। –

+2

event.key अब उपयोग करने वाला एक प्रतीत होता है, यह '0', 'ए', 'एरो लेफ्ट' इत्यादि जैसी स्ट्रिंग देता है। Event.keyCode का उपयोग करके निराश। – bob

+0

फ़ंक्शन AvoidSpace (ईवेंट: कोई भी) { var k = event? event.which: window.event.keyCode; अगर (के == 32) झूठी वापसी; } ऊपर कोड है जिसे मैंने इनपुट बॉक्स में रिक्त स्थान दर्ज करने से रोकने के लिए उपयोग किया है। मैं इसे कोणीय 2 में कार्यान्वित कर रहा हूं। मुझे कुंजीकोड पर एक त्रुटि मिल रही है, कह रही है कि "संपत्ति 'कीकोड' प्रकार 'ईवेंट' पर मौजूद नहीं है। कोई भी"। मुझे क्या करना चाहिए? –

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

के आधार पर उत्तर पर टिप्पणी:

यह सभी घटनाओं का पता नहीं लगाता है। उदाहरण के लिए तीर कुंजी या भागने नहीं। लेकिन आप उन सभी को प्राप्त करने के लिए (कीडाउन) का उपयोग कर सकते हैं।

सबसे अच्छा समाधान सभी घटनाओं दोनों बैकस्पेस हो और हटा सकते हैं या जो कुछ भी कुंजी, बस (इनपुट)

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

eventHandler(keyCode) {...} 
संबंधित मुद्दे