javascript - tangenttryckning med backsteg och radera

Jag är säker på att alla webbdesigner har stött på ett scenario där de behövde kontrollera trycket på alla teckentangenter tillsammans med backsteg och ta bort.

Till exempel, för att visa ett felmeddelande så snart användaren anger en ogiltig tangent. För detta skulle jag kontinuerligt lyssna på en tangentevent för att kontrollera den ogiltiga tangenten.

Eftersom keypress inte fungerar för backsteg och delete-tangenter, använder vi keydown-händelsen. Men problemet med keydown-händelsen är att den skulle utlösa händelsen på alla tangenter inklusive Alt, Ctrl, Tab, etc., tangenterna för vilka jag inte behöver köra logiken för att ta reda på de ogiltiga tangenterna.

Den vanliga lösningen på detta som vi använder och ser är att vi filtrerar bort de icke-nödvändiga nycklarna genom att kontrollera nyckelkoden.

Så, jag ville veta om det fanns något annat sätt, som i något annat nyckelhändelse, för att inte lista alla icke-krävda nycklar i ovanstående scenario?

Svar #1

Du kan registrera två separata händelselyssnare, t.ex. (keydown) för Delete och Backspace samt (keypress) för allt annat vid komponentens initialisering som visas nedan:

  ngOnInit() {

    addEventListener('keypress', (event: KeyboardEvent) => {
      // Execute your logic here.
        console.log(event);
    });

    addEventListener('keydown', (event: KeyboardEvent) => {
      // Check for allowed keys on keydown
      if (event.key === 'Delete' || event.key === 'Backspace') {
        // Execute your logic here.
        console.log(event);
      }
    });

  }

Svar #2

Svar har redan getts så det finns inte mycket förändring i det.

Istället för att kontrollera tangenten med deras namn. Jag har kontrollerat med KeyCode eftersom webbläsaren ibland i vissa fall returnerar event.key som tom, så för att förhindra detta fall kan vi använda keyCode.

Du kan registrera händelsen med addEventListener med keyPress eller KeyDown och kontrollera Keycode för Delete eller mellanslagstangenten och return. Om villkoret uppfylls, hitta länken för alla nyckelkoder: KeyCodes List

 addEventListener('keydown', (event) => {
      // Check for allowed keys on keydown with Code
      if (event.keyCode === 32 || event.keyCode === 46) {
        console.log("Invalid key:",event.code);
        return;
      }
    });

Hoppas att det kommer att lösa ditt problem till viss del.