En bruker trykker Escape, og modalen lukkes ikke. De trykker Enter i søkefeltet, og ingenting skjer. Høres det kjent ut? Tastaturhåndtering i JavaScript virker enkelt helt til du begynner å håndtere tre hendelser, et dusin egenskaper og en jungel av nettleserforskjeller.

Hver keydown eller keyup skaper et KeyboardEvent-objekt med to dusin felter. Noen har vært utdaterte siden IE-tiden, andre oppfører seg forskjellig i Firefox og Chrome. Og MDN-dokumentasjonen er full av «ikke bruk»-merknader. Utviklere trenger ikke enda en spesifikasjon, de trenger et jukseark som fungerer.

Nedenfor finner du en komplett referanse for tastaturhendelser: fra anatomien til KeyboardEvent til ferdige kodebiter for hurtigtaster. Bokmerk kodetabellen, du får bruk for den i omtrent annethvert prosjekt.

💡 Rask oversikt:

• Bruk keydown i stedet for keypress: det fungerer for alle taster.
• event.key gir tastens symbol, event.code returnerer dens fysiske kode.
• event.keyCode og event.which er utdaterte, ikke bruk dem i ny kode.
• Tabellen nedenfor samler koder for alle standardtaster i moderne nettlesere.

Hva KeyboardEvent inneholder

Når en bruker trykker en tast, oppretter nettleseren et KeyboardEvent-objekt, en etterkommer av UIEvent, som igjen utvider basisen Event. Inni ligger tastens egenskaper, modifikatortilstand og layoutinformasjon.

Spesifikasjonen for UI Events er i utvikling: nye egenskaper dukker opp, gamle blir utdaterte. Den største endringen de siste årene er overgangen fra numeriske koder (keyCode / charCode / which) til fordel for event.key og event.code. Alle moderne nettlesere støtter dette paret, og du bør bygge logikken din på dem.

Nettleserstøtten er nesten komplett: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Hvis prosjektet ditt ikke sitter fast med IE11, kan du glemme event.which.

Tre hendelser: keydown, keypress og keyup

Nettleseren skiller mellom tre tastaturhendelser. Rekkefølgen de utløses i er fast:

• keydown, tast trykkes ned (kontaktøyeblikket);
• keypress, tast holdes nede og genererer et tegn (kun for tegntaster);
• keyup, tast slippes.

Abonner på keydown via addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

For innebygde handlere, bruk et elementattributt:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Hvis du sender hendelsesobjektet til konsollen, ser du hele strukturen med alle arvede felter fra UIEvent og Event:

Hvorfor keydown er hovedvalget

keypress er offisielt anerkjent som utdatert. Den utløses bare for taster som produserer en tegnverdi, og fanger ikke opp modifikatorer: ikke Alt, ikke Ctrl, ikke Shift, ikke Meta. Du kan ikke håndtere Ctrl+Z eller Shift+Tab gjennom keypress.

Forskjellen mellom keydown og keyup: keydown utløses før nettleseren behandler tasten; keyup utløses etterpå. En viktig konsekvens følger: event.preventDefault() inne i keydown avbryter nettleserhandlingen (for eksempel å skrive inn et tegn i et felt), men inne i keyup gjør den det ikke. For hurtigtaster, inndatavalidering og spillkontroller trenger du keydown.

Egenskapstabell for KeyboardEvent

De tre nederste radene er utdaterte. Bytt til event.key der det er mulig. Hvis du må støtte en gammel nettleser, lag en fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Men i 2026 er slik kode bare for eldre prosjekter. event.key fungerer overalt.

Modifikatortaster og kombinasjoner

Control-, Shift-, Alt- og Meta-taster utfører ikke handlinger alene, men endrer oppførselen til andre taster. Å trykke Z gir bokstaven «z», mens Ctrl+Z utfører angre.

Boolske egenskaper ved hendelsen hjelper med å spore en modifikator:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

Samme tilnærming gjelder for alle kombinasjoner: Ctrl+S (lagre), Ctrl+Shift+N (nytt vindu), Alt+Tab (bytt). Sjekk rekkefølge: først modifikatorer via boolske flagg, deretter event.key for den spesifikke tasten. Dette gjør logikken lesbar i stedet for å drukne i numeriske koder.

Komplett tabell over tastekoder

Nedenfor er den gjeldende tabellen for alle standardtaster. Verdiene event.key og event.code er angitt slik moderne nettlesere (Chrome, Firefox, Edge, Safari) returnerer dem.

Navigasjon og handlinger

Tallrekke (hovedtastatur)

Bokstaver A-Å

event.key returnerer den lille bokstaven for bokstaver. event.code avhenger ikke av store/små bokstaver eller layout: KeyA betyr den fysiske A-tasten, selv om layouten er russisk og inndata er «Ф».

Spesialtaster

Numerisk tastatur (Numpad)

Funksjonstaster

System og multimedia

Tegnsetting og symboler

Viktige tabellmerknader

• event.which er en utdatert egenskap, bruk event.key.
• event.code er identisk for små (a) og store (A) bokstaver, det er den fysiske tasten. event.key returnerer det faktiske tegnet med hensyn til store/små bokstaver.
• I Firefox er event.which-verdiene for Equal, Semicolon og Minus forskjellige fra Chrome/Edge/Safari (notert i tabellen). Enda en grunn til ikke å bruke event.which.
• Chromium-baserte nettlesere og Firefox gir identiske event.key og event.code for alle oppførte taster.
• Virtuelle tastaturer: UI Events-spesifikasjonen krever at et virtuelt tastatur (mobil, skjermbasert) som gjentar et standardoppsett returnerer korrekt event.code. I praksis håndterer mobile nettlesere (Chrome Android, Safari iOS) keydown/keyup korrekt for hovedtaster, men event.code kan være tom for ikke-standardoppsett.

Interaktiv trener

For rask verifisering av kode fra artikkelen, bruk tastaturtreneren: keyevents.netlify.app. Flytt markøren til området, trykk taster og se verdiene for event.key, event.code og event.which, samt modifikatorflagg i sanntid. Kildekode er tilgjengelig på GitHub.

Video: tastaturhendelser i praksis

En kort praktisk gjennomgang av keydown og keyup, arbeid med modifikatorer og hurtigtaster med levende eksempler:

⁉️🤔 Ofte stilte spørsmål

Hva er forskjellen mellom event.key og event.code?

event.key returnerer tegnverdien med hensyn til layout og store/små bokstaver: for A-tasten er det "a" (eller "A" med Shift), for russisk layout, "ф". event.code returnerer den fysiske tastekoden, identisk for alle layouter: "KeyA". For hurtigtaster er event.code mer pålitelig, den avhenger ikke av inndataspråk. For tekstinndata, bruk event.key.

Hvorfor brukes ikke keypress lenger?

W3C-spesifikasjonen markerte keypress som utdatert: den utløses bare for tegntaster og fanger ikke opp modifikatorer. Du kan ikke håndtere Ctrl+C, Shift+Tab og andre kombinasjoner gjennom keypress. keydown dekker alle taster og støttes identisk i alle moderne nettlesere.

Kan man fullstendig forlate event.which og event.keyCode?

Ja, i 2026 kan du det. event.key støttes i Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Hvis prosjektet ditt ikke retter seg mot IE11 eller Firefox 28, bruk kun event.key og event.code.

Hvordan håndterer man et langt tastetrykk?

Kombiner keydown og keyup. Ved keydown start en timer eller requestAnimationFrame, ved keyup, nullstill den. For spillinndata er dette standardmønsteret: tast holdes, figur beveger seg, slippes, stopper.

Fungerer tastaturhendelser på mobile enheter?

keydown og keyup fungerer i mobile nettlesere ved bruk av eksternt Bluetooth-tastatur. Skjermtastaturet genererer input-hendelser, ikke keydown/keyup for alle taster, så for tekstfelt på mobil er det bedre å bruke input-hendelsen.

Hvordan skiller man venstre Shift fra høyre?

Gjennom event.code: "ShiftLeft" eller "ShiftRight". event.key returnerer "Shift" for begge. Samme for Control, Alt og Meta.

Hva du bør bruke i prosjektet ditt

Hvis du skriver ny kode, bruk keydown som hovedhendelse, og for tasteidentifikasjon, event.key (symbol) og event.code (fysisk tast). Denne kombinasjonen dekker alle scenarioer: hurtigtaster, navigasjon, spillinndata, skjemavalidering.

Hvis du vedlikeholder et produkt med gammel kode på event.which eller event.keyCode, planlegg en refaktorering. Arbeidsmengden er liten: erstatning i handlere, men fordelen er ren, forutsigbar kode uten en jungel av nettleserforskjeller.

Hold tabellen over bokmerket. Neste gang du trenger koden for en bestemt tast, åpner du den og kopierer den nødvendige event.code-verdien uten å måtte huske numeriske koder fra IE6-tiden.