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.

<img> Grafikreferenz

CSS - Navigation mit :target auf und zumachen

PHP - Kalenderwoche anzeigen

JavaScript - Datenbank-Inhalt an ein JavaScript (Array) übergeben

MySQL - Die Differenz zweier Uhrzeiten ermitteln

Selbstdarstellung
Webdarstellung ist nicht nur Selbstdarstellung. Berichten Sie nicht allzu viel über sich selbst. Den Besucher interessiert in der Regel mehr ein Thema (Hobby) das Sie haben als ein langer Bericht, dass Sie weltweit nicht nur der Einzige, sondern auch der Beste sind. Wenn dies zutreffen soll, dann beweisen Sie es mit Ihrem Angebot. Qualität spricht sich auch im Netz herum.