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.

<area> Areal (Verweis-sensitive Grafik)

CSS - Datum als Kalenderblatt darstellen

PHP - Ein kleiner PHP-Jahreskalender

JavaScript - Trim-Funktion in JavaScript

MySQL - Datum vom Timestamp anzeigen

Werbetrommel
Rühren Sie die Werbetrommel. "Wer nicht wirbt der stirbt" Das gilt besonders im Internet. Machen Sie Ihre Seiten In Foren bekannt, aber Bitte dezent. Beantworten Sie alle Emails, die Sie zu Ihrer Homepage bekommen, der Besucher wird Ihre Seite in guter Erinnerung behalten. Machen Sie aktiv in verschiedenen Foren und Chatrooms mit.