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.

<var> Logische Auszeichnung

CSS - Lightbox

PHP - Auswahlliste aus einem Array erstellen

JavaScript - Formularinhalt herunterladen

MySQL - Das Datum der letzten Woche anzeigen

Fehlermeldungen
Wird eine Webseite nicht gefunden, etwa weil in den Suchmaschinen ein toter Link enthalten ist, gibt es eine Fehlermeldung, die weder optisch noch inhaltlich attraktiv ist. Eine typische Fehlermeldung lautet: 404 - File not found.

Eine selbst gestaltete Fehler-Weiterleitungsseite leitet den Besucher sicher zum Angebot der Webseite.