KeyboardEvent keyCode 属性

DOM Evenementen KeyboardEvent

定义和用法

keyCode 属性返回触发 onkeypress Event 的按键的 Unicode 字符代码，或触发 onkeydown of onkeyup Event 的按键的 Unicode 按键代码。

两种代码类型的区别：

  • 字符代码 - 代表 ASCII 字符的数字
  • Toetsencodes - vertegenwoordigen het numerieke getal van de daadwerkelijke toets op het toetsenbord

Deze typen betekenen niet altijd hetzelfde. Bijvoorbeeld, de toetsenkode van kleine letter "w" en hoofdletter "W" is hetzelfde, omdat de ingedrukte toets hetzelfde is ("W" = getal "87"), maar de karakterscode is verschillend, omdat het resulterende karakter verschillend is ("w" of "W", dat wil zeggen "119" of "87"). - Bekijk de volgende voorbeelden voor een beter begrip.

Tip:Als je wilt weten of de gebruiker een afdrukbare toets heeft ingedrukt (bijvoorbeeld "a" of "5"), raad je aan om deze eigenschap te gebruiken op het onkeypress-evenement. Om te weten of de gebruiker een functietoets heeft ingedrukt (bijvoorbeeld "F1", "CAPS LOCK" of "Home"), gebruik dan de onkeydown of onkeyup evenementen.

Opmerking:In Firefox werkt de keyCode-eigenschap niet voor het onkeypress-evenement (het retourneert enkel 0). Voor een cross-browser oplossing, gebruik dan which eigenschapGebruik samen met keyCode, bijvoorbeeld:

var x = event.which || event.keyCode;  // Gebruik which of keyCode afhankelijk van de browserondersteuning

Tip:Voor een lijst van alle Unicode-caractères, raadpleeg onze Volledige Unicode referentie.

Tip:Als je een Unicode-waarde wilt omzetten naar een karakter, gebruik dan fromCharCode() methode.

Opmerking:Deze eigenschap is alleen leesbaar.

Opmerking:De keyCode- en which-eigenschappen worden enkel geleverd voor compatibiliteit. De nieuwste versie van de DOM-evenementen规范 raadt aan om de key-eigenschap te gebruiken in plaats van (indien beschikbaar).

Tip:Als je wilt weten of de "ALT", "CTRL", "META" of "SHIFT"-toets is ingedrukt bij het optreden van een toetsenbordgebeurtenis, gebruik dan altKeyenctrlKey/enmetaKey of shiftKey Eigenschappen.

Voorbeeld

Voorbeeld 1

Verkrijg de Unicode-waarde van de ingedrukte toets:

var x = event.keyCode;

Probeer het zelf

Voorbeeld 2

Gebruik onkeypress en onkeydown om het verschil tussen karakterscodes en toetsenbordcodes te demonstreren:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

Druk op de "a"-toets op het toetsenbord (zonder Capslock) als char en key het volgende resultaat zullen zijn:

Unicode CHARACTER code: 97
Unicode KEY code: 65

Probeer het zelf

Voorbeeld 3

Als de gebruiker de Escape-toets indrukt, wordt er een tekst getoond:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 is de ESC-toets
    alert("Je hebt de Escape-toets ingedrukt!");
  }
}

Probeer het zelf

Voorbeeld 4

Unicode-waarde omzetten naar karakter (niet geschikt voor functietoetsen):

var x = event.keyCode;                // Unicode-waarde ophalen
var y = String.fromCharCode(x);       // Waarde omzetten naar karakter

Probeer het zelf

Syntax

event.keyCode

Technische details

Retourwaarde: Numerieke waarde die de Unicode-karaktercode of Unicode-toetscode vertegenwoordigt.
DOM Versie: DOM Level 2 Events

Browserondersteuning

Eigenschappen Chrome IE Firefox Safari Opera
keyCode Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Gerelateerde pagina's

HTML DOM Referentiehandleiding:KeyboardEvent key Property

HTML DOM Referentiehandleiding:KeyboardEvent charCode Property

HTML DOM Referentiehandleiding:KeyboardEvent which Property

DOM Evenementen KeyboardEvent