En användare trycker på Escape, och modalen stängs inte. De trycker Enter i sökfältet, och ingenting händer. Låter det bekant? Tangentbordshantering i JavaScript verkar enkelt tills du börjar hantera tre händelser, ett dussin egenskaper och en djungel av webbläsarskillnader.

Varje keydown eller keyup skapar ett KeyboardEvent-objekt med två dussin fält. Vissa har varit föråldrade sedan IE-eran, andra beter sig olika i Firefox och Chrome. Och MDN-dokumentationen är full av "använd inte"-noteringar. Utvecklare behöver inte ännu en specifikation, de behöver ett fusklapp som fungerar.

Här nedan är en komplett referens för tangentbordshändelser: från KeyboardEvent-objektets anatomi till färdiga kodsnuttar för snabbtangenter. Bokmärk kodtabellen, du kommer att behöva den i vartannat projekt.

💡 Snabb översikt:

• Använd keydown istället för keypress: det fungerar för alla tangenter.
• event.key ger tangentens symbol, event.code returnerar dess fysiska kod.
• event.keyCode och event.which är föråldrade, använd dem inte i ny kod.
• Tabellen nedan samlar koder för alla standardtangenter i moderna webbläsare.

Vad som finns inuti KeyboardEvent

När en användare trycker på en tangent skapar webbläsaren ett KeyboardEvent-objekt, en ättling till UIEvent, som i sin tur utökar basklassen Event. Inuti finns tangentens egenskaper, modifieringsstatus och layoutinformation.

Specifikationen UI Events utvecklas: nya egenskaper tillkommer, gamla blir föråldrade. Den största förändringen de senaste åren är övergången från numeriska koder (keyCode / charCode / which) till förmån för event.key och event.code. Alla moderna webbläsare stöder detta par, och du bör bygga din logik på dem.

Webbläsarstödet är nästan komplett: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Om ditt projekt inte har fastnat med IE11 kan du glömma event.which.

Tre händelser: keydown, keypress och keyup

Webbläsaren skiljer på tre tangentbordshändelser. Avfyrningsordningen är fast:

• keydown, tangenten trycks ned (kontaktögonblicket);
• keypress, tangenten hålls ned och genererar ett tecken (endast för teckentangenter);
• keyup, tangenten släpps.

Prenumerera 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
});

För inline-hanterare, använd ett elementattribut:

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

Om du skriver ut händelseobjektet till konsolen ser du hela strukturen med alla ärvda fält från UIEvent och Event:

Varför keydown är förstahandsvalet

keypress är officiellt erkänt som föråldrat. Det avfyras bara för tangenter som producerar ett teckenvärde, och fångar inte modifierare: inte Alt, inte Ctrl, inte Shift, inte Meta. Du kan inte hantera Ctrl+Z eller Shift+Tab via keypress.

Skillnaden mellan keydown och keyup: keydown avfyras innan webbläsaren bearbetar tangenten; keyup avfyras efter. En viktig konsekvens följer: event.preventDefault() inuti keydown avbryter webbläsarens åtgärd (till exempel att mata in ett tecken i ett fält), men inuti keyup gör den det inte. För snabbtangenter, indatavalidering och spelkontroller behöver du keydown.

Egenskapstabell för KeyboardEvent

De tre nedersta raderna är föråldrade. Byt till event.key där det är möjligt. Om du måste stödja en gammal webbläsare, gör 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 2026 är sådan kod bara för äldre projekt. event.key fungerar överallt.

Modifierartangenter och kombinationer

Control, Shift, Alt och Meta utför inga åtgärder själva, men ändrar beteendet hos andra tangenter. Att trycka på Z ger bokstaven "z", medan Ctrl+Z utför ångra.

Booleska egenskaper i händelsen hjälper till att spåra en modifierare:

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
});

Samma tillvägagångssätt gäller för alla kombinationer: Ctrl+S (spara), Ctrl+Shift+N (nytt fönster), Alt+Tab (växla). Kontrollera ordningen: först modifierare via booleska flaggor, sedan event.key för den specifika tangenten. Detta gör logiken läsbar istället för att drunkna i numeriska koder.

Komplett tabell med tangentkoder

Nedan är den aktuella tabellen för alla standardtangenter. Värdena event.key och event.code anges som moderna webbläsare (Chrome, Firefox, Edge, Safari) returnerar dem.

Navigering och åtgärder

Sifferraden (huvudtangentbord)

Bokstäver A-Z

event.key returnerar det gemena värdet för bokstäver. event.code beror inte på versal/gemen eller layout: KeyA betyder den fysiska A-tangenten, även om layouten är rysk och inmatningen är "Ф".

Specialtangenter

Numeriskt tangentbord (Numpad)

Funktionstangenter

System och multimedia

Skiljetecken och symboler

Viktiga tabellnoteringar

• event.which är en föråldrad egenskap, använd event.key.
• event.code är identisk för gemener (a) och versaler (A), det är den fysiska tangenten. event.key returnerar det faktiska tecknet med hänsyn till skiftläge.
• I Firefox skiljer sig event.which-värdena för tangenterna Equal, Semicolon och Minus från Chrome/Edge/Safari (noterat i tabellen). Ännu en anledning att inte använda event.which.
• Chromium-baserade webbläsare och Firefox ger identiska event.key och event.code för alla listade tangenter.
• Virtuella tangentbord: specifikationen UI Events kräver att ett virtuellt tangentbord (mobilt, på skärmen) som upprepar en standardlayout returnerar korrekt event.code. I praktiken hanterar mobila webbläsare (Chrome Android, Safari iOS) keydown/keyup korrekt för huvudtangenter, men event.code kan vara tomt för icke-standardlayouter.

Interaktiv tränare

För snabb verifiering av valfri kod från artikeln, använd tangentbordstränaren: keyevents.netlify.app. Flytta markören till ytan, tryck på tangenter och se värdena för event.key, event.code och event.which, samt modifieringsflaggornas tillstånd i realtid. Källkoden finns tillgänglig på GitHub.

Video: tangentbordshändelser i praktiken

En kort praktisk genomgång av keydown och keyup, arbete med modifierare och snabbtangenter med levande exempel:

⁉️🤔 Vanliga frågor

Vad är skillnaden mellan event.key och event.code?

event.key returnerar teckenvärdet med hänsyn till layout och skiftläge: för A-tangenten är det "a" (eller "A" med Shift), för rysk layout, "ф". event.code returnerar den fysiska tangentkoden, identisk för alla layouter: "KeyA". För snabbtangenter är event.code mer tillförlitligt, det beror inte på inmatningsspråk. För textinmatning, använd event.key.

Varför används inte keypress längre?

W3C-specifikationen markerade keypress som föråldrad: den avfyras bara för teckentangenter och fångar inte modifierare. Du kan inte hantera Ctrl+C, Shift+Tab och andra kombinationer via keypress. keydown täcker alla tangenter och stöds identiskt i alla moderna webbläsare.

Kan man helt överge event.which och event.keyCode?

Ja, 2026 kan du det. event.key stöds i Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Om ditt projekt inte riktar sig mot IE11 eller Firefox 28, använd endast event.key och event.code.

Hur hanterar man en lång tangentnedtryckning?

Kombinera keydown och keyup. Vid keydown starta en timer eller requestAnimationFrame, vid keyup, återställ den. För spelinput är detta standardmönstret: tangenten hålls ned, karaktären rör sig, släpps, stannar.

Fungerar tangentbordshändelser på mobila enheter?

keydown och keyup fungerar i mobila webbläsare när ett externt Bluetooth-tangentbord används. Skärmtangentbordet genererar input-händelser, inte keydown/keyup för alla tangenter, så för textfält på mobil är det bättre att använda input-händelsen.

Hur skiljer man på vänster Shift och höger?

Via event.code: "ShiftLeft" eller "ShiftRight". event.key returnerar "Shift" för båda. Samma sak för Control, Alt och Meta.

Vad du ska använda i ditt projekt

Om du skriver ny kod, ta keydown som huvudhändelse, och för tangentidentifiering, event.key (symbol) och event.code (fysisk tangent). Denna kombination täcker alla scenarier: snabbtangenter, navigering, spelinput, formulärvalidering.

Om du underhåller en produkt med äldre kod på event.which eller event.keyCode, planera en refaktorering. Arbetsvolymen är liten: ersättning i hanterare, men vinsten är ren, förutsägbar kod utan en djungel av webbläsarskillnader.

Ha tabellen ovan bokmärkt. När du nästa gång behöver koden för en specifik tangent, öppna den och kopiera det nödvändiga event.code-värdet utan att behöva minnas numeriska koder från IE6-eran.