JavaScript - Mehrere Tastatureingaben mit Zahlen

 

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Mehrere Tastatureingaben mit Zahlen</title>

<style>
body {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
 margin: 25px;
 background: White;
}

.statusBox {
 background-color: #DFEFFF;
 color: #5BADFF;
 text-align: Center;
 padding: 10px;
 border: Solid 1px #5BADFF;
 border-radius: 10px;
 box-shadow: 0px 0px 5px 1px #B2B2B2;
 width: 300px;
 height: 25px;
 margin: 35px;
 Display: Inline-Block;
 position: Absolute;
 left: 35px;
}

#ausgabe {
 font-weight: Bold;
 color: #0080FF;
}

span#num {
 color: #FF0000;
}
</style>


<script>
window.addEventListener("DOMContentLoaded", function() {

   window.addEventListener("keydown", function(event) {

      if (event.code == "Numpad0" || event.code == "Numpad1" || event.code == "Numpad2" ||
               event.code == "Numpad3" || event.code == "Numpad4" || event.code == "Numpad5" ||
               event.code == "Numpad6" || event.code == "Numpad7" || event.code == "Numpad8" ||
               event.code == "Numpad9") {

       if (!document.getElementById("pad")) {
        document.getElementById("ausgabe").appendChild(document.createElement("span")).setAttribute("id", "pad");
        document.getElementById("pad").innerHTML = 'Zahlen eingeben: <span id="num">' + event.key + '</span>';
        document.getElementById("pad").classList.add("statusBox");
       }
       else {
        document.getElementById("num").textContent = document.getElementById("num").textContent + event.key;
       }

       window.setTimeout(function () {

        if (document.getElementById("num") && document.getElementById("pad")) {

         let nummer = document.getElementById("num").textContent;
         document.getElementById("ausgabe").removeChild(document.getElementById("pad"));
         document.getElementById("ausgabe").textContent = nummer;
        }

       },1500);

    }

   }, true);

});
</script>


 </head>
<body>

<p><strong>Mehrere Tastatureingaben mit Zahlen</strong></p>

<p>Meine Zahlen sind: <span id="ausgabe">000</span> <br>
<small>(Tastatureingabe mit: 0 - 9, Ziffernblock)</small></p>

</body>
</html>

Siehe: Tastureingaben und Mausaktionen mit JavaScript

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<code> Logische Auszeichnung

CSS - Container mit Eselsohren

PHP - CSS-Boxen mit PHP erzeugen

JavaScript - Zeit-Differenz ermitteln

MySQL - Höchstwert einer Spalte ermitteln

Reset-Button
Man muss sich bei Formularen überlegen, ob man überhaupt einen Reset-Button braucht - bei Formularen mit nur einem Eingabefeld ist er eher witzlos, bei umfangreichen Formularen ist er dagegen umso ärgerlicher, wenn er aus Versehen betätigt wurde!