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

Den Zeiger über das Jahr navigieren und mit dem Mausrad drehen.


<style>

label#label {
 
cursorn-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:

maus.png
18 x 18 Pixel
786 Byte

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


<script>

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

function ZahlAendern(eventid) {
 
event.preventDefault();

 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(event, this.id)"></label>

Liegen die Zahlenwerte außerhalb des Bereichs, 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


<script>

function 
auswahllisteAendern(eventid) {
 
event.preventDefault();
 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(event, this.id)">
 <
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

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Nur gefüllte Tabellenzellen hervorheben

PHP - Lange Wörter mit Leerzeichen teilen

JavaScript - Trinitätsoperator

MySQL - Mit mehreren Begriffen gleichzeitig suchen