JavaScript - Mehrere Tastatureingaben mit Zahlen

 

Quelltext:  tastatureingaben_mit_zahlen.htm AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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 7px 4px #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", () => {
        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(() => {
                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;
                }
              }, 1700);
            }
          },
          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.

<main> Hauptinhalt der Seite

CSS - Kalender Symbol neben dem Datepicker

PHP - Datum ab einem bestimmten Tag ausgeben

JavaScript - Dateiname ermitteln

MySQL - Datensatz Wert um 10% veringern