Salut,
J'essaye de faire un champ de saisie qui ne permette de saisir qu'un entier (ou plus précisément un entier relativement petit, donc pas de soucis de milliers ou de notation scientifique). Je voudrais simplement qu'on ne puisse pas saisir autre chose que des chiffres (et par saisie, j'entends au clavier, au clavier virtuel, par copier/coller..., par tout moyen de saisie en bref ), sans perdre ma saisie en cours parce que mon doigt ripe sur une touche qui n'est pas un chiffre.
J'ai donc créé un input comme suit (je simplifie en omettant id, classes, et tout le décorum) :
(accessoirement, j'ai aussi des champs sous la forme <input type="number" step=1 min=0> et <input type="number" step=1 min=0 max=200> et le problème est le même)
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <input type="number" step=1>
Le soucis :
- sous Chrome, je peux saisir un point ou une virgule
- sous Edge, je peux saisir n'importe quoi (des lettres en particulier (!)) et, pire, si mon premier caractère n'est pas un chiffre, le placeholder ne disparaît pas mais se décale vers la droite !
Or, je ne veux pas qu'on saisisse autre chose qu'un nombre entier (ou rien, en laissant le champ vide, mais ça c'est une autre histoire que je verrais après).
Je me suis dit que j'allais ajouter un script sur événement qui vire les caractères indésirables (avec en arrière pensée le souci que ça risque de poser sur la position du curseur en cours de frappe, mais, pareil, pour l'instant je laisse ce problème de côté pour le moment). Donc, j'ai écrit (j'utilise JQuery) :
avec
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part field.on('propertychange input', forceInteger);
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 function forceInteger(e){ var $input = $(this); $input.val($input.val().replace(/\D+/g,'')); }
L’événement se déclenche bien et la fonction est exécutée. Le souci, c'est que
- dès que je tape un point :
- sous Chrome, le champ se vide
- sous Edge, ça fonctionne
- dès que je tape une virgule :
- sous Chrome, la virgule reste affichée tant que je ne tape pas un autre chiffre après
- sous Chrome, le champ se vide dès que je tape une virgule ou un point après
- sous Edge, le champ se vide
- dès que je tape une lettre :
- sous Chrome, miracle, ça fonctionne, la lettre est ignorée, ma valeur reste un entier, tout ce que je veux, simplement.
- sous Edge, le champ se vide
En déboguant, sous Chrome, je m'aperçois que l'attribut value de l'input est null lorsqu'on tape des caractères non numériques, mais la valeur affichée contient bien tous les caractères tapés. En inspectant les différents objets (input et événement), je ne trouve pas d'attribut qui contiendrait ce qui est affiché. Première question donc : en existe-il et puis-je récupérer cette valeur et la modifier ?
Le pire, c'est que (sous Chrome) :
- si je tape 100.1, la valeur affichée est 100.1, et la valeur obtenue par l'attribut value (ou par JQuery val()) est 1001 (c'est bien la valeur que je voudrais traiter, mais j'aimerais que logiquement cette valeur soit affichée à mon utilisateur telle que je vais la traiter).
- si je tape 100., la valeur affichée est 100., et la valeur obtenue est null !!! (ce qui pour moi est absurde et incohérent avec le cas précédent).
Donc autre question : comment faire fonctionner ce truc de manière cohérente et logique ?
Accessoirement, j'ai aussi essayé en ajoutant pattern='[0-9]+' à mon champ, avec peu de conviction puisqu'en théorie cela ne devrait ne convenir qu'aux champs de type text (d'ailleurs, au final, j'envisage de tout passer en texte si je ne trouve pas de solution avec input number, et tant pis pour le min et le max que je traiterais autrement), et ça n'a strictement aucun effet.
Pour finir, j'ai testé en virant l'attribut step, mais pas de changement.
PS Cela me fait penser qu'il pourrait en plus y avoir une histoire de locale au sujet des différences de fonctionnement entre Chrome et Edge pour la virgule et le point, mais si je ne pouvais saisir que des chiffres, je n'aurais pas à me soucier de problèmes de locale.
Partager