Saisir un montant de type salaire

Version imprimable

11/10/2018, 15h47
Dendrite

Saisir un montant de type salaire

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 ?
.
11/10/2018, 20h50
CosmoKnacki

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.

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:

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:

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>

12/10/2018, 01h37
Dendrite

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

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

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...:roll:

Code:

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:

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

Code:

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
    }
  });
});

12/10/2018, 12h23
Dendrite

Citation:

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. :mrgreen:

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:

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:

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:

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:

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

12/10/2018, 12h45
Dendrite

Merki Jreaux, j'achète et je marque résolu.
12/10/2018, 13h00
Invité

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.
12/10/2018, 13h19
CosmoKnacki

Attention à échapper le point dans la pattern html:

Code:

pattern="[0-9]+(\.[0-9]{2})?"
12/10/2018, 14h41
Invité

Merci, Maître es-regex :hola:

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

Code:

pattern="\d+(\.\d{2})?"
12/10/2018, 20h01
badaze
Citation:
Envoyé par jreaux62

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

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 !
;)
12/10/2018, 20h02
Invité

Tu as RAISON !

Si Pasteur n'avait pas insisté....
Ou Marie Curie...
:mrgreen:
12/10/2018, 21h49
CosmoKnacki

Citation:

Envoyé par jreaux62

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

Code:

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:

Citation:

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

.

Et la specification ECMAScript est claire sur ce sujet:

Citation:

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.