Forcer le point décimal au lieu de la virgule dans l’entrée du numéro HTML5 (côté client)

J’ai vu que certains navigateurs localisent la notation input type="number" des nombres.

Alors maintenant, dans les champs où mon application affiche les coordonnées de longitude et de latitude, je reçois des choses comme “51.983” où il devrait être “51.982559”. Ma solution de contournement consiste à utiliser input type="text" place, mais j’aimerais utiliser la saisie numérique avec un affichage correct des décimales.

Existe-t-il un moyen de forcer les navigateurs à utiliser un point décimal dans la saisie du nombre, indépendamment des parameters locaux côté client?

(Il va sans dire que dans mon application, je corrige quand même ça du côté du serveur, mais dans ma configuration, je dois aussi le corriger du côté du client (à cause de JavaScript)).

Merci d’avance.

MISE À JOUR Dès maintenant, en cochant Chrome Version 28.0.1500.71 m sur Windows 7, la saisie numérique n’accepte tout simplement pas les décimales formatées avec une virgule. Les suggestions proposées avec l’atsortingbut step ne semblent pas fonctionner.

http://jsfiddle.net/AsJsj/

Avec l’atsortingbut step spécifié à la précision des décimales souhaitées, votre entrée numérique html5 acceptera les décimales. par exemple. prendre des valeurs comme 10,56; Je veux dire 2 chiffres décimaux, faites ceci:

  

Vous pouvez également spécifier l’atsortingbut max pour la valeur maximale autorisée.

Edit Ajoute un atsortingbut lang à l’élément input avec une valeur locale qui formate les décimales avec le point au lieu de la virgule

Actuellement, Firefox respecte la langue de l’élément HTML dans lequel se trouve l’entrée. Par exemple, essayez ce violon dans Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

Vous verrez que les chiffres sont en arabe et que la virgule est utilisée comme séparateur décimal, ce qui est le cas avec l’arabe. En effet, l’atsortingbut BODY reçoit l’atsortingbut lang="ar-EG" .

Ensuite, essayez celui-ci:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

Celui-ci est affiché avec un point en tant que séparateur décimal car l’entrée est enveloppée dans un DIV étant donné l’atsortingbut lang="en-US" .

Une solution consiste donc à encapsuler vos entrées numériques avec un élément conteneur configuré pour utiliser une culture utilisant des points comme séparateur décimal.

Selon la spécification , vous pouvez en utiliser comme valeur de l’atsortingbut step :

  

Malheureusement, la couverture de ce champ de saisie dans les navigateurs modernes est très faible:

http://caniuse.com/#feat=input-number

Par conséquent, je recommande d’attendre le retour en arrière et de s’appuyer sur une entrée chargée par programmation lourde [type = text] pour effectuer le travail, jusqu’à ce que le champ soit généralement accepté.

Jusqu’à présent, seuls Chrome, Safari et Opera ont une implémentation soignée, mais tous les autres navigateurs sont bogués. Certains d’entre eux ne semblent même pas supporter les décimales (comme BB10)!

Je ne sais pas si cela aide, mais je suis tombé ici lors de la recherche de ce même problème, uniquement du sharepoint vue de l’ entrée (c’est-à-dire que mon acceptait une virgule et un point en tapant la valeur, mais seule cette dernière était liée au modèle angularjs que j’ai assigné à l’entrée. J’ai donc résolu en notant cette directive rapide:

 .directive("replaceComma", function() { return { ressortingct: "A", link: function(scope, element) { element.on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); } }); } }; }); 

Ensuite, sur mon html, simplement: remplacera les virgules par des points à la volée pour empêcher les utilisateurs d’entrer des données invalides (du sharepoint vue javascript, pas un local une!) numéros. À votre santé.

J’ai trouvé un article de blog qui semble expliquer quelque chose de lié: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

En résumé:

  • l’ step aide à définir le domaine des valeurs valides
  • l’ step par défaut est 1
  • ainsi le domaine par défaut est des entiers (entre min et max , inclus, si donné)

Je suppose que cela se confond avec l’ambiguïté d’utiliser une virgule comme séparateur de milliers par rapport à une virgule en tant que séparateur décimal, et votre 51,983 est en réalité une cinquante et un mille neuf cent huit-trois.

Apparemment, vous pouvez utiliser step="any" pour élargir le domaine à tous les nombres rationnels de la plage, mais je ne l’ai pas essayé moi-même. Pour la latitude et la longitude, j’ai utilisé avec succès:

   

Ce n’est peut-être pas beau, mais ça marche.

Edit: le lien mis à jour est https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

1) 51.983 est un numéro de type chaîne qui n’accepte pas la virgule

alors vous devriez le définir comme texte

  

remplacer par .

et changer l’atsortingbut de type en nombre

 $(document).ready(function() { var s = $('#commanumber').val().replace(/\,/g, '.'); $('#commanumber').attr('type','number'); $('#commanumber').val(s); }); 

Découvrez http://jsfiddle.net/ydf3kxgu/

J’espère que ceci résoudra votre problème

Si je comprends bien, le nombre d’ input type="number HTML5 input type="number renvoie toujours input.value tant que ssortingng .

Apparemment, input.valueAsNumber renvoie la valeur actuelle sous la forme d’un nombre à virgule flottante. Vous pouvez l’utiliser pour renvoyer une valeur de votre choix.

Voir http://diveintohtml5.info/forms.html#type-number

Avez-vous pensé à utiliser Javascript pour cela?

$('input').val($('input').val().replace(',', '.'));

une option est javascript parseFloat() … ne jamais parsingr une ” text chain" --> 12.3456 avec un point à un int … 123456 (int supprimer le point) parsingr une chaîne de texte à un FLOAT …

envoyer ces coordonnées à un serveur le fait envoyer une chaîne de texte. HTTP envoie uniquement du TEXT

dans le client ne pas parsingr les coords d’entrée avec ” int “, travailler avec des chaînes de texte

si vous imprimez les cordes dans le html avec php ou similaire … flotter au texte et imprimer en html

Utilisez lang atsortingbut sur l’entrée. Locale sur mon application web fr_FR, lang = “en_EN” sur le numéro d’entrée et je peux utiliser indifféremment une virgule ou un point. Firefox affiche toujours un point, Chrome affiche une virgule. Mais les deux parties sont valables.

utiliser le motif

  

bonne chance