Jak uchwycić backspace w wydarzeniu KeyDown?

Podczas tworzenia przyjaznej dla użytkownika strony internetowej lub witryny może istnieć wymóg powstrzymania użytkownika od naciśnięcia konkretnego klawisza podczas wypełniania formularza lub kwestionariusza. Na przykład ograniczenie użytkownika do edytowania lub cofnięcia już wprowadzonych danych. W takich scenariuszach uchwycenie backspace w wydarzeniu kluczowym jest pomocne na końcu dewelopera.

Ten artykuł opracuje podejścia do przechwytywania backspace w wydarzeniu KeyDown w JavaScript.

Jak uchwycić backspace w wydarzeniu KeyDown w określonym elemencie?

„„addEventListener ()„Metoda kojarzy zdarzenie z elementem, a właściwość kodu klucza odnosi się do kodu, który oznacza klawisz naciśnięcie. Podejścia te można wykorzystać do dołączania zdarzenia do pola wejściowego i powiadomienia użytkownika, gdy tylko konkretny klawisz zostanie naciśnięty w nim (pole wejściowe).

Składnia

element.addEventListener (zdarzenie, funkcja, usercapture);

W powyższej składni:

• • "wydarzenie”Odpowiada zdarzeniu, które należy dołączyć.
  • "funkcjonować„Parametr odpowiada funkcji, którą należy wykonać po uruchomieniu zdarzenia.
  • "UserCapture”Jest opcjonalnym parametrem.

Przykład

Przejdźmy przez poniżej podanego kodu:

Wykryć klucz backspace

W powyższym bloku kodu:

• • Po pierwsze, obejmują nagłówek w „

    ”Tag.

  • W następnym kroku przeznacz „wejście tekst„Pole, które stwierdzono„ID".
  • W kodzie JavaScript uzyskaj dostęp do utworzonego pola tekstu wejściowego przez jego „ID" używając "getElementById ()" metoda.
  • Następnie skojarz „addEventListener ()„Metoda z pobieranym elementem (pole wejściowe). W parametrach metody, poprzedni parametr, i.mi., "Keydown”Oznacza nazwę zdarzenia, a ten ostatni parametr odnosi się do funkcji, którą należy wywołać podczas wyzwalanego zdarzenia.
  • W definicji funkcji zastosuj „Kod Klucza„Własność z określonym kodem odnoszącym się do„Backspace”Klucz w„Jeśli" stan.
  • W przypadku zadowolonego warunku alarm z podanym komunikatem zostanie wyświetlony w modelu Document Obiekt (DOM).

Wyjście

W wyjściu można zauważyć, że po naciśnięciu klawisza przestrzeni Backspace użytkownik jest powiadamiany o podanej wiadomości za pośrednictwem alertu.

Jak uchwycić backspace w wydarzeniu KeyDown w dowolnym miejscu w całym modelu obiektu Dokument (DOM)?

W tym konkretnym przykładzie zostanie przechwycona przestrzeń przy pomocy kodu klucza określonego w formie „A”sprawa”W ramach funkcji, która musi zostać wykonana podczas wyzwalanego zdarzenia:

Wykryć klucz backspace

W powyższych wierszach kodu:

• • Podobnie obejmuje podane nagłówek w „

    ”Tag.

  • Podobnie w części kodu JavaScript zastosuj „addEventListener ()„Metoda z załączonym wydarzeniem o nazwie„Keydown”I Nazwa funkcji odpowiednio jako jej parametry.
  • Następnie zdefiniuj funkcję o nazwie „KeyCheck ()”Posiadanie określonego parametru.
  • W swojej definicji skojarz „Kod Klucza”Własność z przekazanym parametrem, aby odpowiedni kod klucza wbrew klucze został wykryty po wyzwalanym zdarzeniu.
  • Na koniec zastosuj „Sprawa przełącznik”Stwierdzenie takiego, że konkretny kod kluczyka na klawisz Backspace jest wywoływany z„sprawa”Instrukcja, a odpowiedni komunikat zostanie wyświetlony za pośrednictwem alertu.

Wyjście

W tym wyjściu można zauważyć, że pożądany wymóg został osiągnięty.

Wniosek

Aby uchwycić backspace na „Keydown„Wydarzenie w JS, użyj kombinacji„addEventListener ()”Metoda i„Kod Klucza" nieruchomość. Pierwszy przykład wykorzystuje te podejścia do przechwytywania konkretnego klucza w określonym elemencie. Ten ostatni przykład można wykorzystać do wykrywania klucza backspace w całym DOM. W tym blogu omówiono podejścia do przechwytywania Backspace w wydarzeniu KeyDown w JavaScript.