কীভাবে আমি পুরো পৃষ্ঠায় কীপ্রেস ইভেন্টটি শুনতে পারি?

Question

আমি আমার পুরো পৃষ্ঠায় একটি ক্রিয়াকলাপ বাঁধার একটি উপায় খুঁজছি (যখন কোনও ব্যবহারকারী কোনও কী চাপায়, আমি এটি চাইছি যে এটি আমার উপাদানগুলিতে কোনও ফাংশন ট্রিগার করবে)

এটি একটি সহ AngularJS এ সহজ ছিল ng-keypressতবে এটি কার্যকর হয় না (keypress)="handleInput($event)"।

আমি পুরো পৃষ্ঠায় একটি ডিভ র‍্যাপার দিয়ে চেষ্টা করেছি তবে এটি কাজ করে বলে মনে হচ্ছে না। এটি কেবল তখনই কাজ করে যখন এতে ফোকাস থাকে।

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

Comments

আপনি চেষ্টা করেছেন window:keypress?

— করোলডেপকা

Answer 1

আমি আপনার উপাদানগুলির মধ্যে @ হোস্টলিস্টনার সাজসজ্জার ব্যবহার করব :

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

ঠিক আছে। '@ কৌণিক / কোর' থেকে L হোস্টলিস্টনার import আমদানি করতে হবে। এবং উপাদান এমনকি কোথাও কল। এমনকি আউট সাইড

— কন্সট্রাক্টরও

এর জন্য ধন্যবাদ, তবে ভবিষ্যতের পাঠকদের জন্য কেবল শীর্ষস্থান: আপনার যদি তীরচিহ্নগুলির দরকার হয় তবে কীপ্রেসের পরিবর্তে কীডাউন ব্যবহার করুন।

— Troels লারসেন

যদি আপনার escকী প্রয়োজন হয় তবে keyupইভেন্টটি ব্যবহার করুন । @ ট্রোলসালারসনকে ধন্যবাদ

— অ্যারন লরিনক্জ

@ ইউরজুই, আমি কীভাবে এই বিশেষ ইভেন্টটির জন্য এই ইভেন্টটি ব্যবহার করতে পারি

— whole

@ ইয়ুরজুই কীভাবে আমি একটি function-key(F1, F2, F3, ...) সনাক্ত করতে পারি ?

— অর্পিত কুমার

Answer 2

ইয়ুরজুইয়ের উত্তরটি আমার পক্ষে কার্যকর হয়নি, এটি কোনও আলাদা আরসি সংস্করণ হতে পারে, বা এটি আমার পক্ষে ভুল হতে পারে। যেভাবেই হোক, আমি এখানে Angular2 RC4 (যা এখন বেশ পুরানো) এর সাথে আমার উপাদানটি দিয়ে কীভাবে করেছি।

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

Comments

এটি একই, কেবল বিকল্প বাক্য গঠন এবং আপনি এর keydownপরিবর্তে ব্যবহার করেছেনkeypress

— গন্টার জ্যাচবাউয়ার

যেমনটি আমি বলেছিলাম, সম্ভবত আমার পক্ষ থেকে একটি ভুল, তবে এটি আমার পক্ষে কাজ করার জন্য এটি লেগেছে। :)

— আদম

ডকুমেন্ট.এডএভেন্টলাইজনার ব্যবহার করে এই বনামের কী সুবিধা হবে? এটি কি কেবল ডিওএমকে দূরে সরিয়ে দেওয়ার বিষয়?

— অক্সোনাল

এই নিবন্ধগুলিতে @ আইকনাল # 2 আমার চেয়ে আরও ভাল বর্ণনা করেছে: Angularjs.blogspot.ca/2016/04/… মূলত, এটি 'কৌণিক' উপায় নয়, কারণ এটি ব্রাউজারের সাথে মিলিত হয়েছে, এবং এটি পরীক্ষামূলক নয়। এখনই কোনও বড় বিষয় নয়, তবে এটি অনুসরণ করা ভাল মডেল।

— অ্যাডাম

সর্বশেষতম ডক্সটি @

— গুইড

Answer 3

2019 ডাব্লু কৌনিক 8 এ কেবল এটি যুক্ত করতে

কিপ্রেসের পরিবর্তে আমাকে কীডাউন ব্যবহার করতে হয়েছিল

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

প্রতি

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

ওয়ার্কিং স্ট্যাকলিটজ

Comments

কৌণিক 9 প্রতিবেদন: কিপ্রেস এবং কীডাউন উভয়ই সাধারণ "এসিডেফ" কীগুলি নিবন্ধভুক্ত করবে, তবে কেবল কীডাউন এফ 4 এবং অন্যান্য ফাংশন কীগুলি পাবেন। কিপ্রেস সিটিআরএল-জেডের মতো কিছু কী কম্বো পেতে পারে, কীডাউন সেগুলি আলাদাভাবে ব্যাখ্যা করে (একটি সিটিআরএল কী, পরে মিলিসেকেন্ড পরে, একটি জেড কী)।

— Anders8

Answer 4

আপনি যদি কোনও নির্দিষ্ট কীবোর্ড বোতাম টিপে কোনও অনুষ্ঠান করতে চান, সেক্ষেত্রে আপনি @ হোস্টলিস্টনার ব্যবহার করতে পারেন। এর জন্য, আপনাকে আপনার উপাদান ts ফাইলে হোস্টলিস্টনার আমদানি করতে হবে।

'@ কৌণিক / কোর' থেকে {হোস্টলিস্টনার import আমদানি করুন;
তারপরে নীচের ফাংশনটি আপনার উপাদান ts ফাইলের যে কোনও জায়গায় ব্যবহার করুন।

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

Answer 5

সচেতন থাকুন "নথি: কিপ্রেস" অবমূল্যায়িত is এর পরিবর্তে আমাদের ডকুমেন্ট: কীডাউন ব্যবহার করা উচিত।

লিঙ্ক: https://developer.mozilla.org/fr/docs/Web/API/ ডকুমেন্ট / keypress_event

Answer 6

আমি মনে করি এটি সেরা কাজ করে

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

উদাহরণস্বরূপ app.compender এ

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