Limiter l'incrémentation et la décrementation d'un nombre dans un champ de texte

**momjunior** · 18/04/2019, 18h27

Bonjour

J'ai ce code html qui me permet d'insérer 2 fleches (+ et -) dans un champ de texte et d'augmenter ou de diminuer la valeur de l'entier qui est saisi:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type = "number" class = "input-numerique"  class="input-sm form-control"></input>

Je l'ai pris au niveau de ce lien:

https://marcautran.developpez.com/ap...er/panier.html

Le problème est qu'en diminuant, la valeur peut aller en-dessous de 0, donc je me retrouve avec un entier négatif dans mon champ de texte.

Comment faire en sorte de ne pas aller en-dessous de 0?

Et dans le sens contraire comment mettre une limite, c'est-à-dire faire en sorte de ne pas dépasser l'entier 9 par exemple.

En résumé, l'entier sera compris entre 0 et 9.

Merci

Merci

**ProgElecT** · 18/04/2019, 22h09

Salut

Un code d’étude (sans JQuery)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align:center; width:400px;
}
</style>
</head>
<body>
 
<p>Entrez un nombre et cliquez Entrer ou sur le bouton Go:</p>
<p>Si le nombre est inférieur à 100 ou supérieur à 300, un message d'erreur s'affiche.</p>
<input type="number" id="id1"  style="width:50px;" onkeypress="verifkey(event)" min="100" max="300" required value="100"> <!-- required Spécifie qu'un champ de saisie est nécessaire (doit être rempli) -->
<input type="button" class="button" onclick="myFunction()" value="Go"></button>
<p id="demo" class="center"></p>
<p id="demo2"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false)
        {
        document.getElementById("demo").style.color = "white";
        document.getElementById("demo").style.backgroundColor = "red"
                document.getElementById("demo").innerHTML = inpObj.validationMessage;
                }else{
        document.getElementById("demo").style.color = "yellow"
        document.getElementById("demo").style.backgroundColor = "green"
                document.getElementById("demo").innerHTML = "Entrée valide";
    } 
} 
function verifkey(event) {
    var x = event.which || event.keyCode;
        document.getElementById("demo2").innerHTML = "Valeur Unicode de votre derniere entrée: " + x;
    if (x == 13)
        {
                myFunction(); return ;
                }else{
                document.getElementById("demo").innerHTML = "";
        }
}
</script>
 
</body>
</html>

Ce qui peut intéresser c'est les 2 propriétés min="100" max="300" de l'<input type="number"

**momjunior** · 19/04/2019, 23h42

Merci beaucoup, ça marche

Limiter l'incrémentation et la décrementation d'un nombre dans un champ de texte

jQuery

Vue hybride

Discussions similaires

Partager

Partager