Je construis une application Web qui est principalement destinée aux navigateurs mobiles. J'utilise des champs de saisie avec le type de nombre, donc (la plupart) les navigateurs mobiles n'appellent que le clavier numérique pour une meilleure expérience utilisateur. Cette application Web est principalement utilisée dans les régions où le séparateur décimal est une virgule, pas un point, je dois donc gérer les deux séparateurs décimaux.
Comment couvrir tout ce désordre avec des points et des virgules?
Mes découvertes:
Chrome de bureau
- Type d'entrée = nombre
- L'utilisateur entre «4,55» dans le champ de saisie
$("#my_input").val();
renvoie "455"- Je ne peux pas obtenir la valeur correcte de l'entrée
Firefox de bureau
- Type d'entrée = nombre
- L'utilisateur entre «4,55» dans le champ de saisie
$("#my_input").val();
renvoie "4,55"- C'est bien, je peux remplacer la virgule par un point et obtenir un flotteur correct
Navigateur Android
- Type d'entrée = nombre
- L'utilisateur entre «4,55» dans le champ de saisie
- Lorsque l'entrée perd le focus, la valeur est tronquée à "4"
- Confus pour l'utilisateur
Windows Phone 8
- Type d'entrée = nombre
- L'utilisateur entre «4,55» dans le champ de saisie
$("#my_input").val();
renvoie "4,55"- C'est bien, je peux remplacer la virgule par un point et obtenir un flotteur correct
Quelles sont les «meilleures pratiques» dans ce genre de situations lorsque l'utilisateur peut utiliser une virgule ou un point comme séparateur décimal et que je souhaite conserver le type d'entrée html sous forme de nombre, afin de fournir une meilleure expérience utilisateur?
Puis-je convertir une virgule en point "à la volée", lier les événements clés, fonctionne-t-il avec des entrées numériques?
ÉDITER
Currenlty Je n'ai aucune solution, comment obtenir une valeur flottante (sous forme de chaîne ou de nombre) à partir de l'entrée dont le type est défini sur nombre. Si l'utilisateur final entre «4,55», Chrome renvoie toujours «455», Firefox renvoie «4,55», ce qui est très bien.
De plus, il est assez ennuyeux que dans Android (émulateur 4.2 testé), lorsque j'entre "4,55" dans le champ de saisie et que je change le focus vers un autre endroit, le nombre entré soit tronqué à "4".
var number = $(...).get(0).valueAsNumber;
if (isNaN(number)) number = parseFloat($(...).val().replace(',', '.');
Mais cette solution ne fonctionne que si le le nombre qui a été mis ne contient qu'une virgule et aucun point supplémentaire ...
.val()
, et Android fait quelque chose de bizarre. Pouvez-vous vérifier s'ils se comportent de la même manière lorsque vous définissez la langue du système sur quelque chose de approprié?