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