Angular’da Belirli Tuşları Keyup ve Keydown Olaylarına Bağlama

Gönder

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

@Component({
  selector: 'app-keyboard-input',
  templateUrl: './keyboard-input.component.html',
  styleUrls: ['./keyboard-input.component.css']
})
export class KeyboardInputComponent {
  onKeyDown(event: KeyboardEvent): void {
    console.log('Tuşa basıldı:', event.key, 'Code:', event.code);
    if (event.key === 'Enter') {
      console.log('Enter tuşuna basıldı!');
      // Form gönderme veya başka bir işlem yap
    }
  }

  onKeyUp(event: KeyboardEvent): void {
    console.log('Tuş bırakıldı:', event.key, 'Code:', event.code);
    if (event.key === 'Escape') {
      console.log('Escape tuşu bırakıldı!');
      // Bir modalı kapatma veya arama kutusunu temizleme gibi işlemler
    }
  }

  onSubmit(): void {
    console.log('Form gönderildi!');
  }
}

Boşlukla Tıkla

Ctrl+S kısayolu
Shift+A kısayolu

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

@Component({
  selector: 'app-keyboard-shortcuts',
  template: 
    
    
Enter'a basıldı!

    
    
Escape bırakıldı!

    

      Bu alana odaklanıp Ctrl+S yapın.
    
    
Ctrl+S basıldı!
  
})
export class KeyboardShortcutsComponent {
  onEnterPressed(): void {
    console.log('Enter tuşuna basıldı (doğrudan)!');
    // Formu gönder
  }

  onEscapeReleased(): void {
    console.log('Escape tuşu bırakıldı (doğrudan)!');
    // Input'u temizle
  }

  onCtrlS(event: KeyboardEvent): void {
    console.log('Ctrl+S kombinasyonu basıldı!');
    event.preventDefault(); // Tarayıcının varsayılan kaydetme davranışını engelle
    // Kaydetme işlemini yap
  }
}

gibi odaklanılamayan elementlerin klavye olaylarını dinleyebilmesi için gereklidir. Aksi takdirde, bu elementler klavye olaylarını tetiklemez.

Programatik Olarak Klavye Olaylarını Yönetme

Bazı durumlarda, klavye olaylarını daha global bir seviyede (tüm belge veya pencere) dinlemek veya daha karmaşık olay işleme mantığı uygulamak isteyebilirsiniz. Angular, HostListener dekoratörü ve RxJS’in fromEvent operatörü ile bu senaryoları destekler.

HostListener Kullanımı

HostListener dekoratörü, bir bileşen veya direktif üzerindeki DOM olaylarını dinlemenizi sağlar. Özellikle tüm belge veya pencere üzerindeki klavye olaylarını dinlemek için çok kullanışlıdır.

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

@Component({
  selector: 'app-global-keyboard-listener',
  template: 
    
Sayfanın herhangi bir yerinde Ctrl+Alt+D tuş kombinasyonuna basın.
  
})
export class GlobalKeyboardListenerComponent {

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent): void {
    // Ctrl+Alt+D kombinasyonunu dinle
    if (event.ctrlKey && event.altKey && event.key === 'd') {
      console.log('Ctrl+Alt+D kombinasyonu algılandı!');
      event.preventDefault(); // Tarayıcının varsayılan davranışını engelle
      // Debug modunu aç/kapat gibi bir işlem yap
    }

    // Sadece Enter tuşuna basıldığında
    if (event.key === 'Enter') {
      console.log('Enter tuşuna basıldı (HostListener ile)!');
    }
  }

  @HostListener('window:keyup', ['$event'])
  handleWindowKeyUp(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      console.log('Escape tuşu bırakıldı (HostListener ile, pencere genelinde)!');
      // Açık bir modalı kapat
    }
  }
}

@HostListener('document:keydown', ['$event']):
* document: Olayın dinleneceği hedef nesne. window veya bileşenin kendi host elementi de olabilir. document tüm belge üzerindeki olayları dinler.
* keydown: Dinlenecek olay türü.
* ['$event']: Olay nesnesini metodunuza parametre olarak geçirmek için kullanılır.

HostListener ile, şablon tabanlı dinlemedeki gibi tuş adlarını doğrudan kullanamazsınız (örn: document:keydown.enter çalışmaz). Tuş kontrolünü metodunuzun içinde if koşullarıyla yapmanız gerekir.

RxJS ve fromEvent ile Daha Gelişmiş Yönetim

RxJS, Angular’ın güçlü bir parçasıdır ve olayları Observable’lar olarak ele almak için harika bir yol sunar. Özellikle karmaşık klavye etkileşimleri, olayları birleştirmek, filtrelemek, geciktirmek veya hızlandırmak (debounce/throttle) istediğinizde fromEvent operatörü çok kullanışlıdır.

Senaryo: Bir arama kutusuna yazarken, kullanıcı yazmayı bıraktıktan 500ms sonra arama isteği göndermek (debouncing).

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { debounceTime, filter, map, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-rxjs-keyboard-search',
  template: 
    
    
Aranıyor: {{ searchTerm }}
  
})
export class RxjsKeyboardSearchComponent implements OnInit, OnDestroy {
  @ViewChild('searchInput', { static: true }) searchInput!: ElementRef;
  searchTerm: string = '';
  private keyupSubscription!: Subscription;

  ngOnInit(): void {
    // Input elementindeki keyup olaylarını Observable olarak al
    this.keyupSubscription = fromEvent(this.searchInput.nativeElement, 'keyup')
      .pipe(
        // Sadece belirli tuşları filtreleyebiliriz, örneğin Enter veya harf/rakamlar
        filter(event => {
          const key = event.key.toLowerCase();
          return (key.length === 1 && /[a-z0-9]/.test(key)) || key === 'backspace' || key === 'enter';
        }),
        map(event => (event.target as HTMLInputElement).value), // Input'un değerini al
        debounceTime(500), // Kullanıcı yazmayı bıraktıktan 500ms sonra tetikle
        distinctUntilChanged() // Sadece değer değiştiyse tetikle
      )
      .subscribe(value => {
        this.searchTerm = value;
        console.log('RxJS ile arama yapılıyor:', this.searchTerm);
        // Arama servisine isteği gönder
      });

    // Global bir klavye kısayolu dinlemek için (örneğin Ctrl+K)
    fromEvent(document, 'keydown')
      .pipe(
        filter(event => event.ctrlKey && event.key === 'k')
      )
      .subscribe(event => {
        event.preventDefault(); // Tarayıcının varsayılan Ctrl+K davranışını engelle
        console.log('Ctrl+K kısayolu RxJS ile algılandı!');
        // Arama kutusuna odaklanma gibi bir eylem yap
        this.searchInput.nativeElement.focus();
      });
  }

  ngOnDestroy(): void {
    // Bellek sızıntılarını önlemek için aboneliği iptal et
    if (this.keyupSubscription) {
      this.keyupSubscription.unsubscribe();
    }
  }
}

Bu örnekte, fromEvent ile keyup olaylarını bir Observable’a dönüştürdük. Ardından pipe operatörü ile çeşitli RxJS operatörlerini kullanarak:
* filter: Sadece belirli tuşların tetiklediği olayları geçirdik.
* map: Olay nesnesinden input’un güncel değerini çıkardık.
* debounceTime: Kullanıcının yazmayı bitirmesini bekledik.
* distinctUntilChanged: Sadece input değeri gerçekten değiştiyse sonraki adıma geçilmesini sağladık.

RxJS, özellikle kompleks senaryolarda klavye olaylarını yönetmek için inanılmaz bir esneklik ve güç sunar.

Uygulama Senaryoları ve Örnekler

Klavye olaylarını bağlama yeteneği, birçok farklı uygulama senaryosunda değerlidir.

Form Girişlerinde Otomatik Odaklama veya Gönderme

* Enter ile Form Gönderme: Bir formdaki son input alanında Enter tuşuna basıldığında formu otomatik olarak göndermek.

      
      
      Gönder
    

* Tab ile Sonraki Alana Geçiş (Custom Logic): Varsayılan Tab davranışını değiştirerek belirli bir düzende alanlar arasında geçiş yapmak.

Klavye Kısayolları Oluşturma

* Kaydetme (Ctrl+S): Bir düzenleyici veya formda “Ctrl+S” tuş kombinasyonu ile veriyi kaydetme. event.preventDefault() kullanarak tarayıcının varsayılan kaydetme penceresinin açılmasını engellemeyi unutmayın.
* Geri Al/Yinele (Ctrl+Z/Ctrl+Y): Bir metin düzenleyicide yapılan değişiklikleri geri alma veya yineleme.
* Navigasyon: Ok tuşları ile bir listede veya tabloda gezinme.

      
{{ item }}
    

Oyun veya Etkileşimli Uygulamalar

* Karakter Hareketleri: Bir web tabanlı oyunda karakteri WASD veya ok tuşlarıyla hareket ettirme. keydown olayı, tuş basılı tutulduğu sürece sürekli hareket sağlamak için idealdir.
* Tuş Kombinasyonları: Belirli tuş kombinasyonlarıyla özel yetenekleri veya eylemleri tetikleme.

Erişilebilirlik (Accessibility) İyileştirmeleri

* Klavye ile Gezinme: Fare kullanamayan veya tercih etmeyen kullanıcılar için uygulamanın tüm özelliklerine klavye ile erişim sağlamak.
* Modal Kapatma: Bir modal penceresini “Escape” tuşu ile kapatma, standart ve beklenen bir erişilebilirlik özelliğidir.
* Odak Yönetimi: Klavye ile etkileşimde bulunurken odaklanılan elementin doğru bir şekilde yönetilmesi.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

Klavye olaylarını kullanırken performansı, kullanıcı deneyimini ve uyumluluğu göz önünde bulundurmak önemlidir.

Performans: Olay Dinleyici Sayısı

* Gereksiz Global Dinleyicilerden Kaçının: document veya window üzerinde çok sayıda veya karmaşık HostListener veya RxJS fromEvent dinleyicisi tanımlamak performansı etkileyebilir. Mümkün olduğunca olayları belirli elementlere veya bileşenlere bağlayın.
* Abonelikleri İptal Edin (RxJS): fromEvent ile oluşturulan Observable’lara yapılan abonelikleri ngOnDestroy yaşam döngüsü kancasında unsubscribe() ederek bellek sızıntılarını önleyin.
* Debounce ve Throttle Kullanın: Özellikle keyup olaylarında arama veya yoğun işlem gerektiren durumlarda debounceTime veya throttleTime gibi RxJS operatörlerini kullanarak olay tetikleme sıklığını sınırlayın.

Olay Yayılımını Durdurma: stopPropagation() ve preventDefault()

* event.stopPropagation(): Bir olayın DOM ağacında yukarı doğru yayılmasını (bubbling) engeller. Örneğin, iç içe geçmiş iki elementte aynı tuşu dinliyorsanız ve içteki elementteki olayın dıştaki elementi tetiklemesini istemiyorsanız kullanışlıdır.
* event.preventDefault(): Tarayıcının bir olaya karşı varsayılan davranışını engeller.
* keydown.enter ile form göndermeyi engellemek.
* keydown.space ile bir butona basıldığında sayfanın aşağı kaymasını engellemek.
* keydown.ctrl.s ile tarayıcının kaydetme penceresini açmasını engellemek.
Bu metodun doğru kullanımı, istenmeyen tarayıcı davranışlarını önlemek için kritik öneme sahiptir.

Tuş Kodları Yerine event.key ve event.code Kullanımı

Daha önce de belirtildiği gibi, eski event.keyCode ve event.which özellikleri tarayıcılar arası uyumsuzluklara yol açabilir ve kullanımları önerilmez. Bunun yerine:
* event.key: Kullanıcının basılı tuttuğu tuşun karakter değerini döndürür. Klavye düzeninden bağımsız olarak “Enter”, “Shift”, “a” gibi değerler verir. Metinsel girdiler veya genel tuş adları için idealdir.
* event.code: Basılan tuşun fiziksel konumunu döndürür. Klavye düzeninden bağımsız olarak “KeyA”, “ShiftLeft”, “NumpadEnter” gibi değerler verir. Örneğin, Amerikan klavyesinde ‘Q’ tuşu, Alman klavyesinde ‘Q’ tuşu aynı fiziksel konuma sahiptir, ancak farklı event.key değerleri döndürebilirler. Fiziksel tuş konumunu önemseyen oyunlar veya özel klavye düzeni işleme durumları için kullanışlıdır.

Kullanıcı Deneyimi ve Çakışmalar

* Tarayıcı Kısayolları ile Çakışmayın: Uygulamanızda tanımladığınız kısayolların tarayıcının veya işletim sisteminin standart kısayolları ile çakışmamasına dikkat edin. Örneğin, Ctrl+T yeni sekme açar, Ctrl+W sekmeyi kapatır. Bu tür kısayolları uygulamanızda kullanmaktan kaçınmak veya event.preventDefault() ile varsayılan davranışı engellediğinizden emin olmak önemlidir.
* Standartlara Uyum: Kullanıcıların alışkın olduğu standart klavye kısayollarını (örneğin Ctrl+S kaydetmek için) kullanmaya özen gösterin. Bu, uygulamanızın daha sezgisel ve kullanımı kolay olmasını sağlar.
* Görsel Geribildirim: Bir klavye kısayolu tetiklendiğinde kullanıcıya görsel bir geribildirim sağlamak (örneğin bir toast mesajı, bir düğmenin vurgulanması), uygulamanın daha duyarlı hissetmesini sağlar.

Sonuç

Angular, keydown ve keyup gibi klavye olaylarını yönetmek için hem basit şablon tabanlı yaklaşımlar hem de HostListener ve RxJS fromEvent ile daha gelişmiş programatik çözümler sunar. Belirli tuşları doğrudan şablonda dinleme yeteneği, yaygın senaryolar için kodu temiz ve okunabilir tutarken, programatik yaklaşımlar daha karmaşık gereksinimleri ve global olay yönetimini karşılar.

Bu makalede ele aldığımız teknikleri ve en iyi uygulamaları kullanarak, Angular uygulamalarınızda güçlü, erişilebilir ve kullanıcı dostu klavye etkileşimleri oluşturabilirsiniz. Klavye olaylarını doğru bir şekilde yönetmek, sadece gelişmiş bir kullanıcı deneyimi sağlamakla kalmaz, aynı zamanda uygulamanızın erişilebilirlik standartlarına uygunluğunu da artırır. event.key ve event.code gibi modern özelliklere odaklanarak, uygulamalarınızın geleceğe dönük ve farklı tarayıcı ile klavye düzenlerinde uyumlu olmasını sağlayın.