Comment modifier la valeur d'un input avec la molette de la souris ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-04-27 11:43:04

Question

Bonjour, j'ai un <input type="text"> qui contient une valeur numérique. Je cherche à modifier cette valeur avec la molette de la souris, de telle manière que lorsqu'on scroll vers le haut cela joute +5, et vers le bas -5. Merci pour votre aide.

Réponse

Pour modifier la valeur d'un input avec la molette de la souris, vous pouvez utiliser l'évènement JavaScript wheel. Dans la fonction suivante la variable variation correspond au nombre que l'on incrémente ou que l'on décrémente.

Voici un exemple pour modifier la valeur d'un input, en JavaScript, avec la molette de la souris :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment modifier la valeur d'un input avec la molette de la souris ?</title>
</head>
<body>
<input type="text" id="test" value="0">
<script>
window.addEventListener('wheel', function(evenement)
{
 var input = document.getElementById('test');
 var variation = 5;
 
 if (evenement.deltaY < 0)
 {
   input.value = Number(input.value) + variation;
 }
 else if (evenement.deltaY > 0)
 {
   input.value = Number(input.value) - variation;
 }
});
</script>
</body>
</html>