JavaScript KeyCode-sökare
Tryck på valfri tangent för att få dess värden för keyCode, key, code och which
Tangentbordsfångst
Fokusera här och tryck på en tangent
Tangentbordshändelser fångas bara inom det här området. Tab registrerar tangenten och flyttar fokus till nästa kontroll.
Använd ett fysiskt tangentbord för kompletta tangentbordshändelser. Mobila tangentbord kan utelämna vissa egenskaper.
Senaste tangenttryckningar
Dina 10 senaste tangenttryckningar visas här.
Information om tangentbordshändelse
event.keyevent.codeevent.keyCodeFöråldradevent.whichFöråldradevent.locationevent.repeatModifierartangenter
Fokusera fångstområdet för att granska en tangentbordshändelse.
Om JavaScript KeyCode-sökaren
Verktyget JavaScript KeyCode-sökaren är ett kostnadsfritt, interaktivt utvecklarverktyg som direkt visar alla egenskaper hos tangenthändelsen när du trycker på en valfri tangent. Oavsett om du bygger kortkommandon, spelkontroller eller tillgänglig navigering är det viktigt att känna till de exakta värdena för event.key, event.code, event.keyCode och event.which för att kunna skriva pålitlig JavaScript som fungerar i alla webbläsare.
Moderna webbapplikationer är starkt beroende av hantering av tangenthändelser, från formulärvalidering till verktyg för samarbete i realtid. Det här verktyget för att slå upp tangentkoder tar bort gissandet genom att visa den fysiska tangentkoden, det logiska tangentvärdet, positionsidentifieraren och alla modifierartillstånd (Shift, Ctrl, Alt, Meta) i samma stund som en tangent trycks ned, direkt i webbläsaren och utan någon installation.
Till skillnad från statiska referenstabeller för tangentkoder fångar den här live-testaren för JavaScript-tangenthändelser upp verkliga webbläsarhändelser, så att du kan kontrollera beteendet på olika operativsystem och tangentbordslayouter. Den markerar också tydligt vilka egenskaper som är föråldrade, vilket hjälper dig att skriva framtidssäker kod som följer aktuella standarder för W3C Keyboard Event.
Viktiga funktioner
- Realtidsvisning av
event.key,event.code,event.keyCode,event.whichochevent.location - Visuella indikatorer för modifierartangenter som visar tillstånden för Shift, Ctrl, Alt och Meta
- Märken för föråldrade egenskaper, som keyCode och which
- Kopiera värdet för valfri enskild händelseegenskap med ett klick
- Exportera alla tangentdata som ett formaterat JSON-objekt
- Historiktabell med dina senaste 10 tangenttryckningar för jämförelse
- Skiljer automatiskt på vänster, höger och numerisk knappsats
- Visuell återgivning av tangenten för enkel identifiering
- Fungerar med alla tangenter, inklusive funktionstangenter, piltangenter och specialtecken
- Helt responsiv design med stöd för mörkt läge
Så använder du JavaScript KeyCode-sökaren
- Aktivera inmatningsytan: Klicka var som helst i den streckade tangenttryckningszonen högst upp i verktyget för att börja lyssna på tangentbordet.
- Tryck på en tangent: Tryck på valfri tangent på tangentbordet så visas alla händelseegenskaper direkt i egenskapsrutnätet nedanför.
- Granska modifierartillstånd: Kontrollera indikatorerna för Shift, Ctrl, Alt och Meta för att se vilka modifierare som var aktiva vid tangenttryckningen.
- Kopiera värden: Klicka på kopieringsikonen bredvid en egenskap för att kopiera dess värde, eller använd knappen “Kopiera alla som JSON” för att exportera alla egenskaper på en gång.
- Jämför tangenter: Tryck på flera tangenter efter varandra och scrolla ned till historiktabellen för att jämföra deras koder sida vid sida.
- Rensa och upprepa: Klicka på knappen Rensa för att nollställa all data och starta en ny testsession.
Användningsområden
- Utveckling av kortkommandon: Ta reda på rätt tangent- och kodvärden för att implementera egna kortkommandon i webbapplikationer.
- Spelkontroller: Koppla fysiska tangenter till spelhandlingar genom att kontrollera event.code för tangentbindningar som är oberoende av layouten.
- Tillgänglighetstestning: Kontrollera att tangentbordsnavigeringen fungerar som den ska och att alla interaktiva element svarar på förväntade tangenter.
- Migrering av äldre kod: Hitta moderna motsvarigheter i event.key till föråldrade event.keyCode-värden som används i äldre projekt.
- Felsökning över webbläsare: Bekräfta att tangenthändelser ger konsekventa värden i Chrome, Firefox, Safari och Edge.
- Validering av formulärinmatning: Ta reda på exakta tangentvärden för att tillåta eller blockera specifika tecken i textfält.
- Skriva handledningar och dokumentation: Slå snabbt upp korrekta tangentkoder att ta med i utvecklarguider och referensmaterial.
- Skilja numerisk knappsats från huvudtangentbordet: Använd egenskapen location för att skilja mellan tangenter på den numeriska knappsatsen och vanliga siffertangenter.
Vanliga frågor
Vad är skillnaden mellan event.key och event.code?
event.key returnerar tangentens logiska värde (till exempel “a” eller “A” beroende på Shift), medan event.code returnerar den fysiska tangenten på tangentbordet (till exempel “KeyA”) oavsett modifierare eller tangentbordslayout. Använd event.key för teckeninmatning och event.code för positionsbaserade kortkommandon.
Är event.keyCode fortfarande säkert att använda?
event.keyCode är officiellt föråldrad enligt W3C och kan bete sig olika i olika webbläsare. Använd event.key eller event.code i nya projekt. Många äldre kodbaser förlitar sig dock fortfarande på keyCode, så det här verktyget visar den som referens för bakåtkompatibilitet.
Varför är fältet location viktigt?
Egenskapen event.location skiljer mellan tangenter som finns på flera ställen på ett tangentbord, till exempel vänster Shift och höger Shift, eller sifferraden och den numeriska knappsatsen. Det är avgörande för applikationer som behöver skilja mellan dubbla tangenter.
Är verktyget gratis?
Ja, JavaScript KeyCode-sökaren är helt gratis att använda, utan registrering, utan användningsgränser och utan dolda avgifter. Du kan använda den så ofta du behöver för utveckling och testning.
Är mina data säkra?
Absolut. All tangentavkänning sker helt i din webbläsare med hjälp av inbyggda JavaScript-tangenthändelser. Inga tangenttryckningar eller händelsedata skickas någonsin till en server. Din inmatning förblir helt privat på din enhet.
Fungerar det på mobila enheter?
Verktyget fungerar bäst med ett fysiskt tangentbord. På mobila enheter kan skärmtangentbordet utlösa alla händelseegenskaper på ett inkonsekvent sätt. För pålitliga resultat bör du använda en stationär eller bärbar dator, eller ansluta ett externt tangentbord till din mobila enhet.
Tips och bästa praxis
- Föredra event.key för teckeninmatning: Den tar automatiskt hänsyn till tangentbordslayout, språk och modifierartillstånd.
- Använd event.code för spelkontroller: Fysiska tangentpositioner förblir desamma oavsett användarens tangentbordslayout (QWERTY, AZERTY, Dvorak).
- Testa alltid kombinationer med modifierare: Tryck Ctrl+Shift+tangent eller Alt+tangent för att bekräfta att dina lyssnare för kortkommandon fångar rätt kombination.
- Titta efter mönster i historiktabellen: Genom att jämföra flera tangenttryckningar upptäcker du avvikelser eller hittar rätt koder snabbare.
- Exportera JSON till dokumentation: Använd funktionen “Kopiera alla som JSON” för att klistra in exakta tangentdata direkt i kodkommentarer eller utvecklardokumentation.
- Testa i flera webbläsare: Värden för tangenthändelser kan skilja sig mellan webbläsare, särskilt för specialtangenter. Verifiera alltid i de webbläsare du riktar dig mot.