javascript - Hur man tar reda på vilken teckentangent som trycks ned?

Jag skulle vilja ta reda på vilken teckentangent som trycks ned på ett webbläsarövergripande sätt i ren Javascript.

Svar #1

„Clear“ JavaScript:

function myKeyPress(e){
  var keynum;

  if(window.event) { // IE                  
    keynum = e.keyCode;
  } else if(e.which){ // Netscape/Firefox/Opera                 
    keynum = e.which;
  }

  alert(String.fromCharCode(keynum));
}
<input type="text" onkeypress="return myKeyPress(event)" />

JQuery :

$("input").keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

Svar #2

Mer nyligen och mycket renare: använd event.key. Inga fler godtyckliga siffkoder!

OBS: De gamla egenskaperna (.keyCode och .which) är föråldrade.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

Om du vill försäkra dig om att endast enstaka tecken anges, kontrollera key.length === 1, eller att det är ett av de tecken du förväntar dig.

Mozilla-dokument

Stödda webbläsare

Svar #3

Det finns en miljon dubbletter av den här frågan här, men här kommer den igen ändå:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

Den bästa referensen på viktiga händelser jag har sett är http://unixpapa.com/js/key.html.

Svar #4

Kopiera och klistra in detta i din adressfält:

data:text/html,<body style=font:12vw' onkeyup="this.innerHTML=['key','keyCode','code'].map(k=>k+': '+event[k]).join`<br>`">Press a key

Detta är bara 134 byte kod för att producera key, keyCode och code för tangenten du precis tryckte på. Du kan också spara detta som ett bokmärke så att du kan köra det när som helst.

<body style=font:8vw'
  onkeyup="this.innerHTML=['key','keyCode','code'].map(k=>k+': '+event[k]).join`<br>`"
  >Press a key

Detta fungerar även i "Kör kodsnutt".

Relaterade artiklar