मैं पूरे पृष्ठ पर कीपर ईवेंट के लिए कैसे सुन सकता हूँ?

Question

मैं अपने पूरे पृष्ठ पर एक फ़ंक्शन को बांधने का एक तरीका ढूंढ रहा हूं (जब कोई उपयोगकर्ता किसी कुंजी को दबाता है, तो मैं चाहता हूं कि यह मेरे घटक में एक फ़ंक्शन को ट्रिगर करे)

यह AngularJS में आसान था, ng-keypressलेकिन इसके साथ काम नहीं करता है (keypress)="handleInput($event)"।

मैंने इसे पूरे पृष्ठ पर एक दिव्य आवरण के साथ आज़माया, लेकिन यह काम नहीं करता। यह केवल तभी काम करता है जब फोकस इस पर हो।

<div (keypress)="handleInput($event)" tabindex="1">

Comments

क्या आपने कोशिश की है window:keypress?

— करोलदीपका

Answer 1

मैं आपके घटक के भीतर @HostListener डेकोरेटर का उपयोग करूंगा :

import { HostListener } from '@angular/core';

@Component({
  ...
})
export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

इसके अन्य विकल्प भी हैं:

@Componentडेकोरेटर के भीतर मेजबान संपत्ति

कोणीय @HostListenerमेजबान की संपत्ति पर सज्जाकार का उपयोग करने की सिफारिश करता है https://angular.io/guide/styleguide#style-06-03

@Component({
  ...
  host: {
    '(document:keypress)': 'handleKeyboardEvent($event)'
  }
})
export class AppComponent {
  handleKeyboardEvent(event: KeyboardEvent) {
    console.log(event);
  }
}

renderer.listen

import { Component, Renderer2 } from '@angular/core';

@Component({
  ...
})
export class AppComponent {
  globalListenFunc: Function;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.globalListenFunc = this.renderer.listen('document', 'keypress', e => {
      console.log(e);
    });
  }

  ngOnDestroy() {
    // remove listener
    this.globalListenFunc();
  }
}

Observable.fromEvent

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';

@Component({
  ...
})
export class AppComponent {
  subscription: Subscription;

  ngOnInit() {
    this.subscription = Observable.fromEvent(document, 'keypress').subscribe(e => {
      console.log(e);
    })
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Comments

ठीक ठाक है। आयात {HostListener} को @ @ कोणीय / कोर ’से जोड़ना है। और घटक में कहीं भी कॉल करें। यहां तक ​​कि बाहर के

— कंस्ट्रक्टर

इसके लिए धन्यवाद, लेकिन भविष्य के पाठकों के लिए सिर्फ एक सिर: यदि आपको तीर कुंजियों की आवश्यकता है, तो keypress के बजाय कीडाउन का उपयोग करें।

— ट्रॉल्स लार्सन

यदि आपको escकुंजी की आवश्यकता है , तो keyupईवेंट का उपयोग करें । @TroelsLarsen

— Aron Lorincz

@yurzui, मैं विशेष घटक के लिए इस ईवेंट का उपयोग कैसे कर सकता हूं। पूरे पृष्ठ पर नहीं देखें

— kamalav

@yurzui मैं a function-key(F1, F2, F3, ...) का पता कैसे लगा सकता हूं ?

— अर्पित कुमार

Answer 2

yurzui का जवाब मेरे काम नहीं आया, यह एक अलग RC संस्करण हो सकता है, या यह मेरी ओर से एक गलती हो सकती है। किसी भी तरह से, यहां मैंने Angular2 RC4 (जो अब काफी पुराना है) में अपने घटक के साथ यह कैसे किया।

@Component({
    ...
    host: {
        '(document:keydown)': 'handleKeyboardEvents($event)'
    }
})
export class MyComponent {
    ...
    handleKeyboardEvents(event: KeyboardEvent) {
        this.key = event.which || event.keyCode;
    }
}

Comments

यह वही है, बस वैकल्पिक वाक्यविन्यास और आप के keydownबजाय इस्तेमाल कियाkeypress

— गुंटर Zöchbauer

जैसा कि मैंने कहा, शायद मेरी ओर से गलती हुई है, लेकिन यह है कि यह मेरे लिए काम करने के लिए इसे ले लिया। :)

— आदम

डॉक्यूमेंट .addEventListener का उपयोग करके इसका क्या लाभ होगा? क्या यह डोम को दूर करने का मुद्दा है?

— Ixonal

इस आलेख पर @Ixonal # 2, मेरे से बेहतर वर्णन कर सकता है: angularjs.blogspot.ca/2016/04// मूल रूप से, यह 'कोणीय' तरीका नहीं है, क्योंकि यह ब्राउज़र के साथ युग्मित है, और यह परीक्षण योग्य नहीं है। हो सकता है कि अभी कोई बड़ी बात न हो, लेकिन यह एक अच्छा मॉडल है।

— एडम

नवीनतम डॉक्स @HostListener: angular.io/docs/ts/latest/guide/…

— saschwarz

Answer 3

2019 में इसे जोड़ने के लिए बस कोणीय 8,

keypress के बजाय मुझे कीडाउन का उपयोग करना था

@HostListener('document:keypress', ['$event'])

सेवा

@HostListener('document:keydown', ['$event'])

वर्किंग स्टैकलिट्ज़

Comments

कोणीय 9 की रिपोर्ट: कीपर और कीडाउन दोनों सामान्य "asdf" कुंजियों को पंजीकृत करेंगे, लेकिन केवल कीडाउन को F4 और अन्य फ़ंक्शन कुंजियाँ मिलेंगी। Keypress को CTRL-Z जैसे कुछ प्रमुख कॉम्बो मिल सकते हैं, कीडाउन उन अलग से व्याख्या करता है (एक CTRL कुंजी, फिर बाद में मिलीसेकंड, एक Z कुंजी)।

— एंडर्स 8

Answer 4

यदि आप किसी विशिष्ट कीबोर्ड बटन प्रेस पर कोई भी कार्यक्रम करना चाहते हैं, तो उस स्थिति में, आप @HostListener का उपयोग कर सकते हैं। इसके लिए, आपको अपने घटक ts फ़ाइल में HostListener को आयात करना होगा।

'@ कोणीय / कोर' से {HostListener} आयात करें;
फिर अपने घटक ts फ़ाइल में कहीं भी फ़ंक्शन का उपयोग करें।

@HostListener('document:keyup', ['$event'])
  handleDeleteKeyboardEvent(event: KeyboardEvent) {
    if(event.key === 'Delete')
    {
      // remove something...
    }
  }

Answer 5

अवगत रहें "दस्तावेज़: कीपर" पदावनत है। हमें दस्तावेज़ का उपयोग करना चाहिए: इसके बजाय कीडाउन।

लिंक: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event

Answer 6

मुझे लगता है कि यह सबसे अच्छा काम करता है

https://angular.io/api/platform-browser/EventManager

उदाहरण के लिए app.component में

constructor(private eventManager: EventManager) {
    const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
      'document',
      'keypress',
      (ev) => {
        console.log('ev', ev);
      }
    );
  }