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

Den Mauszeiger über 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)

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.

<strong> Stark betonter Inhalt

CSS - Container vertikal drehen

PHP - Die ersten X-Wörter eines Satzes ausgeben

JavaScript - Schlüssel und Wert aus einem Objekt auslesen

MySQL - Mehrere Spalten einer Tabelle sortieren

Klare Rubrikeinteilung
Damit der Benutzer schnell und vor allem einfach an die gewünschten Informationen kommt, müssen die einzelnen Inhalte (Artikel etc.) der Homepage in klar ersichtliche Rubriken eingeteilt werden.