JavaScript - Mehrere Tastatureingaben mit Zahlen
Quelltext: tastatureingaben_mit_zahlen.htm Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
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
PHP - Auswahlliste aus einem Array erstellen