JavaScript - Zahl in einem Eingabefeld mit dem Mausrad verändern
Den Mauszeiger über Jahr
navigieren und mit dem Mausrad drehen.
<style>
label#label {
cursor: n-resize;
color: #0000DD;
}
</style>
<script>
// Zahl in einem Eingabefeld mit dem Mausrad verändern
function jahrAendern(event) {
event.preventDefault();
var wert = Math.floor(event.deltaY);
var zahl = Number(document.getElementById("jahr").value);
if (wert < 0) {
zahl -= 1;
}
if (wert > 0) {
zahl += 1;
}
document.getElementById("jahr").value = zahl;
}
</script>
<label for="jahr" onwheel="jahrAendern(event)" id="label">Jahr:</label>
<input type="number" value="2019" id="jahr">
Verwendete Grafik:
18 x 18 Pixel
786 Byte
Zahl in einem Eingabefeld mit dem Mausrad verändern (Beispiel 2)
Den Mauszeiger über dem Eingabefeld navigieren und mit dem Mausrad drehen.
<script>
// Zahl in einem Eingabefeld mit dem Mausrad verändern (Beispiel 2)
function ZahlAendern() {
event.preventDefault();
var id = event.target.id;
var wert = Math.floor(event.deltaY);
var zahl = Number(document.getElementById(id).value);
if (wert < 0) {
zahl -= 1;
}
if (wert > 0) {
zahl += 1;
}
document.getElementById(id).value = zahl;
}
</script>
<label>Zahlen von 1 bis 5: <input type="number" name="zahl" id="zahl" value="2"
min="1" max="5" onwheel="ZahlAendern()"></label>
Liegen die Zahlenwerte außerhalb des Bereichs (die mit min="1" und max="5" festgelegt
wurden),
so wird das Formularfeld mit folgender CSS-Anweisung (rot) hervorgehoben.
<style>
input[type="number"]:out-of-range {
border: Solid 1px #DD0000;
background-color: #FFCACA;
}
</style>
Siehe auch: CSS - Fehleingaben in Formularen mit CSS hervorheben
Auswahlliste mit dem Mausrad verändern
Den Mauszeiger über die Auswahlliste navigieren und mit dem Mausrad drehen.
<script>
function auswahllisteAendern() {
event.preventDefault();
var id = event.target.id;
var wert = Math.floor(event.deltaY);
var anzahl = document.getElementById(id).length-1;
var zahl = Number(document.getElementById(id).selectedIndex);
if (wert < 0) {
zahl -= 1;
}
if (wert > 0) {
zahl += 1;
}
if (zahl <= 0) {
zahl = 0;
}
if (zahl >= anzahl) {
zahl = anzahl;
}
document.getElementById(id).selectedIndex = zahl;
}
</script>
<select name="auswahl1" id="auswahl1" onwheel="auswahllisteAendern()">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
</select>
Siehe auch: JavaScript - Bild mit dem Mausrad vergrößern
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<details> Details
CSS - Diagonaler Streifen-Effekt
PHP - Prüfen, ob eine Variable ein Integer ist