Saisir un montant de type salaire

**Dendrite** · 11/10/2018, 15h47

Bonjour,

J'ai le souci suivant :
Sur un formulaire HTML5 avec plusieurs champs de type number, je veux saisir des salaires, des charges, des emprunts...
Sous Firefox, c'est bien sympathique, on peut cliquer sur le petit bouton up...
Problème, il monte par défaut de 1.
Et j'aimerais qu'il grimpe par défaut de 100...
Or, si je mets step="100", ça fait tout autre chose, puisque ça oblige le client à mettre un multiple de 100.
Une idée pour me permettre de garder un pas de 100 tout en laissant le client finir à la main en saisissant 1554 s'il le souhaite ?
.

**CosmoKnacki** · 11/10/2018, 20h50

La seule manière que je vois serait d'utiliser un champ texte normal, de lui coller deux png clickables en forme de flèches et de contrôler le tout en javascript.

**badaze** · 11/10/2018, 22h33

Pas très PHP comme question

L'idée est d'avoir deux input number. Pour le premier on cache les flèches, pour le second on le positionne sous le premier.
Concernant le second input. On met un pas de 100, un mini de -100 un maxi de 100. Quand la valeur du second input change on l'additionne à la valeur du premier et on remet le second input à 0.
De cette manière on simule un -100 ou un +100 à chaque clic.

Ne fonctionne que sur Firefox... je suis une quiche en css.

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
<!DOCTYPE html> 
<html>
<head>
<style>
input[class=hide]::-webkit-inner-spin-button, 
input[class=hide]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}input[class=hide] {
    -moz-appearance:textfield;
}
#spinner {
    position: relative-to element(#montant);
 left: -138px;
}
</style>
</head>
<body>
<input class="hide" id="montant" type="number" placeholder="Saisie" value="0" style="position: relative; z-index: 100"/>
<input type="number" id="spinner"  step="100" min="-100" max="100" style="position: relative; z-index: 90" onchange="document.getElementById('montant').value=parseFloat(document.getElementById('montant').value)+parseInt(this.value);this.value=0;"/>
</body>
</html>

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
47
<!DOCTYPE html> 
<html>
<head>
<style>
input[class=hide]::-webkit-inner-spin-button, 
input[class=hide]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}input[class=hide] {
    -moz-appearance:textfield;
}
#montant {
 position:relative;
 z-index:100
}
#spinner {
    position: relative-to element(#montant);
 left: -138px;
 position:relative;
 z-index:90;
}
</style>
<script>
function toto(anObj)
{
 document.getElementById('montant').value=parseFloat(document.getElementById('montant').value)+parseInt(anObj.value);
 anObj.value=0;
}
function changeStep(value)
{
 document.getElementById('spinner').step = value;
 document.getElementById('spinner').min = value * -1;
 document.getElementById('spinner').max = value;
}
</script>
</head>
<body>
<input class="hide" id="montant" type="number" placeholder="Saisie" value="0" />
<input type="number" id="spinner"  step="100" min="-100" max="100"  onchange="toto(this)"/>
<select id="step" onchange="changeStep(this.value)">
 <option value="1">Pas de 1 </option> 
 <option value="10">Pas de 10 </option> 
 <option value="100" selected>Pas de de 100 </option> 
 <option value="1000">Pas de de 1000 </option> 
</select>
</body>
</html>

**Dendrite** · 12/10/2018, 01h37

Merci pour tout messieurs !
Je vois ça lundi et je vous fais un retour !

Invité · 12/10/2018, 08h01

@badaze
Pourquoi faire simple quand on peut faire compliqué...

Un input "text", avec un pattern "numérique" (histoire de contrôler la saisie)
2 boutons "+" et "-"

Ensuite, en JS, ce n'est quand même pas bien compliqué d'appliquer (au clic sur un bouton) "+100" ou "-100" à la valeur de l'input.

Cela dit.... Si le gars n'est pas capable de taper directement 1554 dans l'input...
... C'est plutôt d'une aide médicale qu'il a besoin...

Code html :

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

1
2
<input type="text" pattern="([0-9]+)(.[0-9]{2})?" title="Saisie" value="" class="input-number" id="montant" />
<button type="button" class="btn-step btn-plus" data-id="montant">+</button><button type="button" class="btn-step btn-moins" data-id="montant">-</button>

Code css :

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

1
2
.input-number { width:70px; padding:5px; text-align:right; }
.btn-step { width:30px; padding:5px; cursor:pointer; }

Code JavaScript :

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
var the_step = 100;
var btns_step = document.querySelectorAll('button.btn-step');
btns_step.forEach(function(btn){
  btn.addEventListener('click',function(){
    var input = document.querySelector( '#'+btn.dataset.id ); // on récupère l id de l input dans le data-id du bouton
    var input_val = (input.value!='')? parseFloat(input.value) : 0; // valeur actuelle ou 0
    if( btn.classList.contains('btn-plus'))
    {
      input.value = input_val + the_step;
    } 
    else if( btn.classList.contains('btn-moins'))
    {
      input.value = (input_val - the_step>=0)? input_val - the_step : 0; // valeur positive
    }
  });
});

**Dendrite** · 12/10/2018, 12h23

Cela dit.... Si le gars n'est pas capable de taper directement 1554 dans l'input...
... C'est plutôt d'une aide médicale qu'il a besoin...

Lol...
Le gars n'en est pas à ce point, tu as raison.
Son problème est plutôt que comme je mettais des input type="number", ben il voit les petites flèches et il peut pas s'empêcher de jouer avec, et de se dire : "Ouah, c'est nul, ça saute de 1 en 1"...
Normal quoi, le gars...
Donc je règle le problème comme tu le conseilles. Input de type text et pattern de type nombre... sans autre formalité. Finalement, tu peux redéplacer le sujet dans HTML (lol, non, je rigole).

Mais j'espère que quelqu'un a fait remonter à M. HTML5 que l'on pourrait ajouter un attribut "pace" à l'input de type number, qui ne contraindrait pas l'utilisateur à saisir un multiple, m'enfin, ça m'étonnerait qu'il me lise, M. HTML5.

Invité · 12/10/2018, 12h26

Bonjour Dendrite,

Je t'ai mis le code (dans mon message précédent).

Le pattern va à 2 décimales : 1523.35
Pour un numérique sans décimales : pattern="([0-9]+)".

Remarque :

Code :

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

var the_step = 100;

On peut aussi mettre cette valeur dans un data-step des boutons.

Ainsi, on peut faire varier d'un input à l'autre si on veut :

Code html :

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

1
2
3
4
5
6
7
8
<p><label>Montant :</label>
  <input type="text" pattern="\d+(\.\d{2})?" title="Nombre à 2 décimales (xxxx.xx)" value="" class="input-number" id="montant" />
<button type="button" class="btn-step btn-plus" data-id="montant" data-step="100">+</button><button type="button" class="btn-step btn-moins" data-id="montant" data-step="100">-</button> (step : 100)
</p>
<p><label>Salaire :</label>
  <input type="text" pattern="\d+(\.\d{2})?" title="Nombre à 2 décimales (xxxx.xx)" value="" class="input-number" id="salaire" />
<button type="button" class="btn-step btn-plus" data-id="salaire" data-step="5">+</button><button type="button" class="btn-step btn-moins" data-id="salaire" data-step="5">-</button> (step : 5)
</p>

Code css :

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

1
2
3
label { display:inline-block; width:80px; }
.input-number { width:70px; padding:5px; text-align:right; }
.btn-step { width:30px; padding:5px; cursor:pointer; }

Code JavaScript :

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
var btns_step = document.querySelectorAll('button.btn-step');
btns_step.forEach(function(btn){
  btn.addEventListener('click',function(){
    var the_step = parseFloat( btn.dataset.step ); // on récupère le step dans le data-step du bouton
    var input = document.querySelector( '#'+btn.dataset.id ); // on récupère l id de l input dans le data-id du bouton
    var input_val = (input.value!='')? parseFloat(input.value) : 0; // valeur actuelle ou 0
    if( btn.classList.contains('btn-plus'))
    {
      input.value = input_val + the_step;
    } 
    else if( btn.classList.contains('btn-moins'))
    {
      input.value = (input_val - the_step>=0)? input_val - the_step : 0; // valeur positive
    }
  });
});

Démo ici : https://codepen.io/jreaux62/pen/oaejeb

**Dendrite** · 12/10/2018, 12h45

Merki Jreaux, j'achète et je marque résolu.

Invité · 12/10/2018, 13h00

Le seul "inconvénient" (mineur) est que sur tablette/smartphone, pour la saisie manuelle, il ouvrira le clavier "normal" (alpha) au lieu du clavier "numérique".
Cela dit, les boutons fonctionneront toujours très bien.

**CosmoKnacki** · 12/10/2018, 13h19

Attention à échapper le point dans la pattern html:

Code :

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

pattern="[0-9]+(\.[0-9]{2})?"

Invité · 12/10/2018, 14h41

Merci, Maître es-regex

Et si je ne m'abuse, ça peut s'écrire :

Code html :

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

pattern="\d+(\.\d{2})?"

**badaze** · 12/10/2018, 20h01

Envoyé par jreaux62

@badaze
Pourquoi faire simple quand on peut faire compliqué...

Un input "text", avec un pattern "numérique" (histoire de contrôler la saisie)
2 boutons "+" et "-"

Ensuite, en JS, ce n'est quand même pas bien compliqué d'appliquer (au clic sur un bouton) "+100" ou "-100" à la valeur de l'input.

J’essaie toujours d’être pragmatique en informatique. Mais de temps en temps je me lâche !

Invité · 12/10/2018, 20h02

Tu as RAISON !

Si Pasteur n'avait pas insisté....
Ou Marie Curie...

**CosmoKnacki** · 12/10/2018, 21h49

Envoyé par jreaux62

Et si je ne m'abuse, ça peut s'écrire :

Code html :

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

pattern="\d+(\.\d{2})?"

Oui on peut très bien utiliser \d à la place de [0-9].

Cette question n'est pas si évidente qu'elle en à l'air car la classe \d pourrait éventuellement s'entendre à l'unicode et contenir en plus des chiffres ASCII 0-9 des chiffres d'autres alphabets comme \u{0660}-\u{0669} (chiffres en arabe).

La documentation html5 à propos de l'attribut pattern s'en réfère à Javascript:

If specified, the attribute’s value must match the JavaScript Pattern production. [ECMA-262]

.

Et la specification ECMAScript est claire sur ce sujet:

21.2.2.12CharacterClassEscape
The production CharacterClassEscape::d evaluates as follows:

Return the ten-element set of characters containing the characters 0 through 9 inclusive.

Il n'est fait mention ni de "mode" unicode, ni de locales susceptibles de modifier le contenu de \d.

Saisir un montant de type salaire

JavaScript

Discussions similaires

Partager

Partager