JavaScript - Zahl in einem Eingabefeld mit dem Mausrad verändern

Den Mauszeiger über Jahr navigieren und mit dem Mausrad drehen.

Jahr:

<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:

Zahl in einem Eingabefeld mit dem Mausrad verändern (Beispiel 2)

Den Mauszeiger über dem Eingabefeld navigieren und mit dem Mausrad drehen.

Zahlen von 1 bis 5:

<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.

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9 Option 10

<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.

<cite> Zitat

CSS - Notizzettel mit Büroklammer

PHP - Callback-Funktion auf jedes Element in einem Array anwenden

JavaScript - Zufallslink im neuen Tab/Fenster anzeigen und aktuelle Seite verlassen

MySQL - Das Datum und die Uhrzeit der letzten Stunde anzeigen