KeyboardEvent keyCode 属性

DOM-event KeyboardEvent

定义和用法

keyCode 属性返回触发 onkeypress-händelse 的按键的 Unicode 字符代码，或触发 onkeydown eller onkeyup-händelse 的按键的 Unicode 按键代码。

两种代码类型的区别：

  • 字符代码 - 代表 ASCII 字符的数字
  • Tangentkod - representerar det faktiska numret på tangenten på tangentbordet

Dessa typer betyder inte alltid samma sak. Till exempel är tangentkoden för smått "w" och stora "W" samma, eftersom den tryckta tangenten är samma ("W" = siffra "87"), men teckenkoden är olika, eftersom det resulterande tecknet är olika ("w" eller "W", dvs. "119" eller "87") - se fler exempel nedan för att få en bättre förståelse.

Tips:För att veta om användaren tryckte på en utskrivbar tangent (t.ex. "a" eller "5"), rekommenderas att använda detta attribut på onkeypress-händelsen. För att förstå om användaren tryckte på en funktionstangent (t.ex. "F1", "CAPS LOCK" eller "Home"), använd onkeydown eller onkeyup-händelser.

Kommentar:I Firefox fungerar keyCode-attributet inte för onkeypress-händelser (returnerar endast 0). För en lösning som fungerar över webbläsare, använd which-attributetTillsammans med keyCode, till exempel:

var x = event.which || event.keyCode;  // Använd which eller keyCode beroende på webbläsarens stöd

Tips:För en lista över alla Unicode-tecken, se vår Komplett Unicode-referens.

Tips:Om du vill konvertera ett Unicode-värde till ett tecken, använd fromCharCode() metoden.

Kommentar:Egenskapen är skrivskyddad.

Kommentar:keyCode- och which-attributen tillhandahålls endast för kompatibilitet. Den senaste versionen av DOM-evenemangsnormen rekommenderar att använda key-attributet istället (om tillgängligt).

Tips:Om du vill veta om "ALT", "CTRL", "META" eller "SHIFT"-tangenten trycktes när tangenthändelsen inträffade, använd altKey,ctrlKey/,metaKey eller shiftKey egenskaper.

Exempel

Exempel 1

Få Unicode-värdet för den tryckta tangenten:

var x = event.keyCode;

Prova själv

Exempel 2

Använd onkeypress och onkeydown för att visa skillnaden mellan teckenkoder och tangentbordskoder:

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

När du trycker på tangenten "a" på tangentbordet (utan att använda Capslock), kommer char och key-resultaten att vara:

Unicode CHARACTER code: 97
Unicode KEY code: 65

Prova själv

Exempel 3

Om användaren trycker på Escape-tangenten, visas något text:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 är ESC-tangenten
    alert("Du tryckte på Escape-tangenten!");
  }
}

Prova själv

Exempel 4

Konvertera Unicode-värdet till ett tecken (inte för funktionstangenter):

var x = event.keyCode;                // Hämta Unicode-värdet
var y = String.fromCharCode(x);       // Konvertera värdet till ett tecken

Prova själv

Syntaks

event.keyCode

Tekniska detaljer

Returvärde: Numeriska värden som representerar Unicode-teckenkoder eller Unicode-tangentkoder.
DOM-version: DOM nivå 2 Events

Webbläsarstöd

Egenskaper Chrome IE Firefox Safari Opera
keyCode Stöd Stöd Stöd Stöd Stöd

Relaterade sidor

HTML DOM referenshandbok:KeyboardEvent key-egenskap

HTML DOM referenshandbok:KeyboardEvent charCode-egenskap

HTML DOM referenshandbok:KeyboardEvent which-egenskap

DOM-event KeyboardEvent