[Résolu] [JS] Input number changement de step dynamiquement...

Bonjour,

Intéressant ton histoire, pour moi, c'est juste un truc de dingue !
Voir le Codepen

Mais ce n'est pas un problème jQuery, mais pitêtre Chrome qui pète un plomb (je ne peux rien tester d'autres ici à part IE11 qui ne le supporte même pas)

La preuve avec un autre Codepen (EDIT: cet exemple se comprend un peu plus)

J'attends donc aussi les idées des autres alsanautes
Modifié par SolidSnake (08 Jun 2016 - 09:32)

tester dans chrome la version du code actuel retourne en appyant sur la fleche en haut ( donc en incrementant seulement) : [ 4 6 8 10 12 "ok+4" 16 20 24 "pas ok" 28 34 ]
il y a un retard d une boucle au lieu de 24 vers 30 (+6) on a 24 vers 28 ( +4)

ai testé sans succes les solutions suivantes :
- if (Number(parseInt($(this).val()) >= Number(12)))
- gestion des intervalles < 12 puis =< 12 =< et > 12 ainsi que 24
-sélecteur statique input ou dynamique input[step='2']
-variable global window.step

je ne comprend pas trop si $(this).val() est la valeur avant le clik ou après le clik avec cle nouveau ou l ancien step ? cette question me fait dire que le code est exacte et le problème est ailleurs. L'étude de la valeur de step en entré du script et à la fin de celui me montre que le problème est en amont . L'erreur provient dans la logique du script (pas son execution) qui ne prend pas en compte la logique d'implémentation du input / step/number par les différents navigateurs.

Dans tous les cas la valeur de départ est 4 ( mis en bleu). Le problème provient juste avant l'étape d'avant :
cas1 = >étape vers 10 vers 12 avant l'étape de 12 vers 16
cas 2 => étape vers 20 vers 24 pour l'étape de 24 vers 30( en fait 28 ici du a un bug )

cas 1 pas de problème
si on se met dans un contexte ou cela fonctionne c'est à dire passage de 12 a 16 ( step passe de 2 a 4 ) . si on part de la valeur 10 ;apres le click la valeur passe la valeur de 10 a 12 et le step passe de 2 a 4 pour afficher une valeur de 12 .Donc à l'état valeur 10 la vérification avec step de 2 donne 10 =4+2*3 ok et apres 12 =4+4*2=4+2*6. Il n y a pas de problème apparent car on a bien pour arriver à 12 un multiple entier ce qui n'est pas le cas du cas 2 ou le bug apparait . En fait le problème est la vérification de la valeur qui se fait mal au niveau du navigateur car celui ci prend en compte la valeur du nouveau step ( valeur définie modifiée par le script) dans la vérification donc ici il prend en compte le step à la valeur 4 ( modifié par le script ) .

cas 2 "problème" gérer par chrome
lors du clik lorsque la valeur visuel est 20 on passe alors de 20 a 24 et le step appliqué de 4.A la fin de cette étape la valeur du step passe à 6 ( implementé par le script ) . Tout est ok sauf la vérification effectué par chrome pour respecter le concept tag//attribut <input>//step=/value= . L'information de cette vérification apparait en mettant le curseur sur l input (voir la capture d 'écran) avec le pop up "Please enter a valid value . The nearest valid Values are 22 and 28" .
pour chrome (un pop up pour informer mais css :hoover)


pour firefox ( un peu plus explicite visuellement avec un css outline ? )
]

pour internet explorer 11 ( ne supporte pas input step )


voir lesupport input/step sur can i use
En fait l'erreur apparait dans l'étape ( a la fin) du passage de la valeur 20 à 24 du fait qu'a la fin de cette étapes la valeur du step est pris en compte pour la vérification alors que celle ci devrait ce faire avec la valeur 4 et pas celle imposé par le script .
Donc si on n avait pas modifié la valeur du step ( 4) alors 24=4+4*5 donc ok mais le step est modifié à la valeur 6 donc 24= (4+6*3 = 22) ou (4+6*4=28) ce qui n est pas possible . Donc en interne chrome ( je ne sais pas pour les autres navigateurs) affiche 24 mais en fait utilise une autre valeur ( je pense que c est 22 et pas 28). En effet si on clique sur l incrementation positive ( flèche du haut dans la représentation graphique de input) , la valeur finale est 28 et 28-6= 22 . En gros puisque le step est de 6 actuellement ; donc la valeur passe en interne de 22+6=28 ( la valeur qui est affiché) et pas 30 =24 (valeur affiché ) + 6 ( valeur du step défini par javascript)


visuellement dans chrome [ 4 6 8 10 12 "ok+4" 16 20 24 "pas ok" 28 34 ]
La valeur 24 ne répond pas à la vérification et chrome choisit 22 parmi 22 ou 28
interne dans chrome [ 4 6 8 10 12 "ok+4" 16 20 22 "ok+6" 28 34 ]

Est ce que l 'interprétation du comportement du script correspond à la logique du input/step implémenté par chrome ? Je n'ai pas le code source de chrome et les compétences pour débugger le code source de chrome !!

Est ce que la description technique ( spécification) des input/ step prend en compte /aborde la possibilité de modification de la valeur du step par les scripts : je ne sais pas ...
Modifié par 75lionel (09 Jun 2016 - 04:30)

JQuery n'est pas en cause, et ce n'est pas non plus un problème de retard de prise en compte de la modification. Je viens de faire un petit test et voilà ce qu'il en ressort :

Mon code :
[code="html"]
<input id="num" type="number" value="4" min="4" max="36" step="2" />
[/code][code="js"]
window.onload = function(){
var input = document.getElementById('num');
input.onchange = function(){
var val = parseInt(this.value), step = 2;
if (val>=24) step = 6;
else if (val>=12) step = 4;
input.step = step;
}}
[/code]

Si on enlève les attributs min=4 et max=36, alors le problème disparaît. ON obtient bien la suite 4, 6, 8, 10, 12, 16, 20, 24, 30, 36 (je suppose que c'est la série à laquelle on s'attend).
Attention car en décrémentant on n'obtient pas la même suite (36, 30, 24, 18, 16, 12, 8, 6, 4). En remplaçAnt les >= par des > dans les conditions on inverse le problème. Pour une solution correcte du point de vue utilisateur, il faut stocker la valeur précédente afin de connaître le sens de passage (incrémentation ou décrémentation) et ainsi agir en conséquence de façon symétrique.

C'est min=4 qui pose un problème et voici pourquoi. Lionel a plus ou moins trouvé mais le voici en termes peut-être un peu plus clairs :

Quand on atteint 24, la step passe à 6. Techniquement la valeur est maintenant invalide mais elle n'est pas modifiée, car le changement de step s'effectue après l'incrémentation et la vérification de la nouvelle valeur (c'est ainsi car on n'utilise l'évènement change, qui est déclenché après que le changement de valeur est terminé).

Si on incrémente, on devrait passer à 30. Or 30 n'est pas congru à 4 modulo 6. Ainsi la nouvelle valeur est arrondie à une valeur inférieure valide, soit 28.
En essayant avec d'autres steps, on peut s'apercevoir que le comportement est bien celui-ci. Par exemple avec 5 au lieu de 6, le comportement paraît plus évident (on obtient 24, 29, 34, 39). Si on met 16, on arrive directement à 36 après 24. Avec 3 on passe de 24 à 25 (on a donc bien un arrondi à l'inférieur et non au plus proche car sinon 27 aurait dû se transformer en 28).

La spécification, section 4.10.5.3.8, parle de valeur de base et de valeurs permises.
Les valeurs permises sont base + k * step où k est arbitraire. La valeur est ajustée à une valeur permise lorsqu'on la modifie. La base vaut min, value ou 0, le premier des trois qui est présent.
Le comportement qu'on observe est donc conforme à la spécification.


A partir de là, les solutions sont :
- Fixer min=0 au lieu de 4, et éventuellement faire une vérification supplémentaire pour empêcher d'introduire 0 comme valeur
- Transformer le champ en zone de liste déroulante (<select>). IL n'y a pas énormément de valeurs proposées, ça ne devrait donc pas être problématique.
- Utiliser l'attribut list et <datalist> pour créer une liste de choix prédéfinis. Compatible IE10 semble-t-il.

Rooh putain j'ai bondit en mode "mais c'est bien sur" en lisant ton post Quentin. xD
En tout cas, je ne pensais pas que ce topic aurait autant de succès...

J'avais également essayé de remplacer "change" par "input" et j'avais effectivement songé à un problème de moment ou l'event était déclenché.
Si je ne dis pas de bétise, l'event est déclenché à la toute fin...
Et donc .val() équivaut à la valeur après clic.

Lionel, j'me suis marré sur tes screens des nav. Du genre sur celui là ca fait ca, celui là ci et IE... rien du tout.
Au fait, c'est quoi :hoover ?

@Solidsnake : Bah ué moi aussi j'ai tourné pendant 1h sur ce truc et gueulant par intermittence, ma femme m'a à moitié mis dehors à la fin... xD

Sinon, je viens de songer à une autre solution, c'est modifier en même temps le min pour qu'il corresponde toujours au step.

(merci en tout cas de votre participation, je suis rassuré quand à l'état mystique de mon script )

@c@scou
une images vaut milles mots . Je ne connaissais rien avant de lire votre post sur input min max ..... J'espère que les personnes qui ne connaissent pas le tag html <input> et les nouveaux attributs "HTML5 " min max ......et ne comprennent pas le javascript comprennent au moins le problème avec quelques images ( simples ) . Sinon j'ai passé du temps ( et pas 1 heure ... ) et si cela vous fait rire marré ..au moins la lecture de mon post a été un "entertainment" pour vous ( et pas une difficulté à lire ..... ) .

pour ceux qui débutent ( pas votre cas je crois ? ) ......
un hoover ( en fait hover) comme content sont des mots réservés et qu' interprète ( parse) un navigateur pour faire apparaitre un changement ( ici apparition d un texte "pop up" ) selon le contexte ( voir plus loin) . Ce sélecteur virtuel ( de type class) , donnons lui le nom de "selector" (<tag class="selector" > </tag> ). Je suppose que le code css qu il contient ( voir plus bas) devrait s appliquer dans l input mais est un code propre interne a chrome( comme sa feuille de style ) donc non visible même dans le debuger chrome .Allez sur ce lien pour comprendre et tester le hover sur un lien ce qui signifie que si le pointeur de votre souris est situé au dessus du lien , la couleur du fond derrière le texte devient jaune ( dans ce cas )

.selector:hover:after{
margin-left: 30px;
color: black;
padding: 5px;
content:"Please enter a valid value . The nearest valid Values are 22 and 28";
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 0px;
box-shadow: 2px 2px 3px #595959;
}

sinon l essentiel est que le forum par ce post est été utile pour vous ( je pense que c est le cas ) et pour moi ( j'ai augmenté mes connaissances par le post de QuentinC ) .
Modifié par 75lionel (09 Jun 2016 - 23:17)

C@scou a écrit :
Rooh putain j'ai bondit en mode "mais c'est bien sur" en lisant ton post Quentin. xD
En tout cas, je ne pensais pas que ce topic aurait autant de succès...

En fait tous utilisateurs connectés ou non a chaque fois que l on clique sur le lien vers le post incrémente de 1 la valeur . Ainsi si je clique plusieurs fois sur le lien pour une même session le nombre de consultation s incrémente. il faudrait n incrémenté de 1 que par session et donc dis d'une autre façon que seul le premier clique vers le lien vers le post incrémente de 1 par "session" ( cookies je t aime) . Si vous étudiez les post ou je poste vous constaterez que le nombre est souvent élevé ( j édite beaucoups et me reconnecte souvent sur le post car j'apprécie la lecture des autres personnes "feed back" et surtout je souhaite connaitre la raison ou la solution au problème ) .

QuentinC a écrit :
Sinon, je viens de songer à une autre solution, c'est modifier en même temps le min pour qu'il corresponde toujours au step.
C'est à tester. Mais à mon avis c'est plus facile de mettre min=0 et de faire une petite vérification. OU le &lt;select&gt; si l'utilisateur doit absolument choisir une des valeurs 4, 6, 8, 10, 12, 16, 20, 24, 30, 36 et pas autre chose.

La solution du champ de saisie INPUT de type numérique, avec des attributs @min @max @step, ne peut pas fonctionner correctement, dans la mesure où la valeur de "step" conditionne de facto la valeur de "min" sur laquelle va se baser le navigateur pour calculer ses paliers.
a) jusqu'à 12 : step 2 = 4,6,8,10,12
b) de 12 à 24 : step 4 = 16,20,24
c) au-delà de 24 : step 6 = 30,36
Or @min est invariant dans l'état actuel (valeur 4).
Step 6 est compatible avec la valeur 30, par exemple, mais celle-ci n'est pas un multiple de 4.
Rendre l'attribut @min dynamique via javascript n'est pas une solution viable et complexifie l'ensemble, pour un bénéfice nul.
La solution de Quentin basée sur une balise SELECT est largement la plus facile à mettre en oeuvre et la plus évolutive. Rien n'empêche en effet de fixer le jeu de valeurs autorisées dès le départ (flux PHP), ou bien en cours de route via javascript.
S'agissant d'un ensemble de valeurs fini, cette approche est plus conforme aux usages et ne perturbera pas l'utilisateur.
A contrario, l'input à "step" variable risque fort de rendre le comportement du champ de saisie un tantinet incompréhensible, ce champ ayant parfois des intervalles à 2, 4 ou 6, sans que l'utilisateur ait un retour visuel lui permettant de savoir quels sont les paliers en cours à un instant T...
Le SELECT a au moins l'avantage d'être clair et sans ambiguïté, en offrant les seules valeurs possibles (dûment triées bien entendu).
Modifié par sepecat (10 Jun 2016 - 00:48)

Ca sent le truc pour jeu de rôle.


JE ne suis pas sûr qu'on puisse physiquement construire un dé 14 et qui de plus est équilibré.
Même des dés 16 en fait je n'en ai jamais vu.

Ouuuups, oublié de revenir voir les réponses, so sorry !

En fait si ca existe carrément :

http://www.des-en-folie.fr/impact-miniatures/4656-des-d14-sarcelle-translucide-et-blanc-impact-miniatures.html

http://www.des-en-folie.fr/impact-miniatures/4626-des-d16-noir-et-blanc-impact-miniatures.html

http://www.des-en-folie.fr/impact-miniatures/4657-des-d18-sarcelle-translucide-et-blanc-impact-miniatures.html

Bon après, le jeu est fait maison donc je suis en phase de réflexion pour savoir comment les utiliser.
Je pense surtout m'en servir pour des personnages "surhumains".

Donc un être humain augmenté, ou une créature. (c'est un jeu sf)