Wat is er nieuw bij KeyboardEvents? Sleutels en codes!

De afgelopen paar versies van Chrome hebben twee toevoegingen gezien aan KeyboardEvent s , die worden gebruikt als parameter die wordt doorgegeven aan keydown , keypress en keyup gebeurtenislisteners. Zowel het code (toegevoegd in Chrome 48 ) als het key (toegevoegd in Chrome 51 ) bieden ontwikkelaars een eenvoudige manier om informatie te verkrijgen die anders moeilijk zou zijn met behulp van oudere kenmerken.

Het codekenmerk

Als eerste is er het code . Dit wordt ingesteld op een tekenreeks die de toets vertegenwoordigt die is ingedrukt om de KeyboardEvent te genereren, zonder rekening te houden met de huidige toetsenbordindeling (bijvoorbeeld QWERTY versus Dvorak ), landinstelling (bijvoorbeeld Engels versus Frans) of eventuele wijzigingstoetsen. . Dit is handig als het je uitmaakt welke fysieke toets is ingedrukt, in plaats van met welk teken deze overeenkomt. Als u bijvoorbeeld een spel aan het schrijven bent, wilt u misschien dat een bepaalde set toetsen de speler in verschillende richtingen beweegt, en die toewijzing zou idealiter onafhankelijk moeten zijn van de toetsenbordindeling.

Het belangrijkste attribuut

Vervolgens hebben we het nieuwe key . Het is ook ingesteld op een string , maar terwijl code informatie retourneert over de fysieke toets die is ingedrukt, bevat key het teken dat door die toets wordt gegenereerd, rekening houdend met de huidige toetsenbordindeling, landinstelling en modificatietoetsen. Kijken naar de waarde van het key is handig als u wilt weten welk teken op het scherm wordt weergegeven alsof de gebruiker tekstinvoer heeft ingetypt.

Wat betekent dit in de praktijk?

Laten we, om een ​​concreet voorbeeld te geven, aannemen dat uw gebruiker een Amerikaans toetsenbord met een QWERTY-toetsenbordindeling gebruikt. Als u op de fysieke Q toets op dat toetsenbord drukt, resulteert dit in een KeyboardEvent met een code ingesteld op "KeyQ" . Dit geldt ongeacht de toetsenbordindeling en ongeacht eventuele andere modificatietoetsen. Ter vergelijking: op een Frans ( AZERTY ) toetsenbord zou deze toets nog steeds de code "KeyQ" hebben, ook al is de letter op de toetskap een "a". Als u op de fysieke Q toets op datzelfde Amerikaanse toetsenbord drukt, wordt doorgaans een KeyboardEvent gegenereerd waarbij key is ingesteld op "q" (zonder modificatietoetsen), of "Q" (met Shift of CapsLock), of "œ" (op OS X, met Alt). Op een Frans AZERTY-toetsenbord zou dezelfde toets een "a" genereren (of "A" met Shift of CapsLock). En voor andere toetsenbordindelingen kan de key "й" , "ض" , "ㅂ" , "た" of een ander teken zijn. Als u ons spelvoorbeeld van eerder nog eens bekijkt: als u wilt dat uw spel de WASD-toetsen gebruikt voor beweging, kunt u het code gebruiken en controleren op "KeyW" , "KeyA" , "KeyS" en "KeyD" . Dit werkt voor alle toetsenborden en alle indelingen, zelfs voor AZERTY-toetsenborden die de positie van de "w"- en "z"-toetsen omwisselen.

Virtuele toetsenborden

Je zult merken dat we ons tot nu toe hebben geconcentreerd op het gedrag uitgaande van een fysiek toetsenbord. Hoe zit het met gebruikers die op een virtueel toetsenbord of een alternatief invoerapparaat typen? De specificatie biedt officiële richtlijnen voor het code attribuut. Samenvattend wordt verwacht dat een virtueel toetsenbord dat de lay-out van een standaardtoetsenbord nabootst, ertoe zal leiden dat een geschikt code attribuut wordt ingesteld, maar virtuele toetsenborden die niet-traditionele lay-outs aannemen, kunnen ertoe leiden dat code helemaal niet wordt ingesteld.

Voor het key is het eenvoudiger. Je zou verwachten dat dit wordt ingesteld op een tekenreeks op basis van het teken dat de gebruiker (virtueel) heeft getypt.

Probeer het

Gary Kačmarčík heeft een fantastische demo samengesteld voor het visualiseren van alle attributen die verband houden met KeyboardEvent s:

KeyboardEvent-kenmerken

Ondersteuning voor meerdere browsers

Ondersteuning voor het code is op het moment van schrijven beperkt tot Chrome 48+, Opera 35+ en Firefox 44+. Het key wordt ondersteund in Firefox 44+, Chrome 51+ en Opera 38+, met gedeeltelijke ondersteuning in Internet Explorer 9+ en Edge 13+.