Beispiel:JS-event-Tastaturabfrage.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Tastaturabfrage</title>
</head>
<body>
  <h1>Tastaturabfrage</h1>

  <main>
    <p> Bitte drücken Sie irgendeine Taste.
    <p><output id="gedrueckt"></output></p>
    <p><output id="losgelassen"><output></output></p>   
  </main>

<script>
  var elem = document.querySelector('body'),
      text = '';
  elem.addEventListener("keydown", TasteGedrückt );
  elem.addEventListener("keyup", TasteLosgelassen);
  
  function TasteGedrückt (evt) {
    document.querySelector('#gedrueckt').innerHTML = `<strong>Taste gedrückt</strong>: <br> key: ${evt.key} <br>keyCode: ${evt.keyCode} <br>which: ${evt.which} <br>charCode: ${evt.charCode} <br>Zeichen : ${String.fromCharCode(evt.charCode)}`;
	document.querySelector('#losgelassen').innerHTML = '';
  }


  function TasteLosgelassen(evt){
    document.querySelector('#losgelassen').innerHTML = `<strong>Taste losgelassen:</strong> <br>keyCode: ${evt.keyCode} <br>which: ${evt.which} `;
    
  }

</script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-event-Tastaturabfrage.html&oldid=67206“