web-dev-qa-db-fra.com

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 trucs comme "51,983" où il devrait être "51.982559". Ma solution consiste à utiliser input type="text" à la place, mais j'aimerais utiliser la saisie de nombre 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, quels que soient les paramètres locaux côté client?

(Il va sans dire que dans mon application, je corrige quand même ceci du côté serveur, mais dans ma configuration, j'ai également besoin que ce soit correct du côté client (à cause de JavaScript).).

Merci d'avance.

UPDATE À partir de maintenant, en vérifiant la version de Chrome 28.0.1500.71 m sous Windows 7, le nombre saisi n'accepte pas les décimales formatées avec une virgule. Les suggestions proposées avec l'attribut step ne semblent pas fonctionner.

http://jsfiddle.net/AsJsj/

html5inputtypesnumbersdecimal
59
chocolata

Avec l'attributstepspécifié avec la précision des décimales souhaitée, votre entrée numérique html5 acceptera les décimales. par exemple. prendre des valeurs comme 10.56; Je veux dire 2 nombres décimaux, faites ceci:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

Vous pouvez également spécifier l'attributmaxpour la valeur maximale autorisée.

Edit Ajoutez un attributlangà l'entrée avec une valeur de langue qui met en forme les décimales avec un point au lieu d'une virgule

18
Peter

Actuellement, Firefox respecte la langue de l'élément HTML dans lequel réside 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 de l'arabe. En effet, l'attribut lang="ar-EG" est attribué à la balise BODY.

Ensuite, essayez celui-ci:

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

Celui-ci est affiché avec un point comme séparateur décimal, car l'entrée est entourée d'une DIV en fonction de l'attribut lang="en-US".

Ainsi, une solution à laquelle vous pouvez avoir recours consiste à envelopper vos entrées numériques avec un élément conteneur configuré pour utiliser une culture qui utilise des points comme séparateur décimal.

16
Ashraf Sabry

Selon spec , vous pouvez utiliser any comme valeur de l'attribut step:

<input type="number" step="any">
7
Halil Özgür

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 repli et de m'appuyer sur une entrée [type = text] chargée de manière volumineuse 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)!

2
opalenzuela

1) 51 983 est un numéro de type chaîne n'accepte pas les virgules 

alors vous devriez le définir comme texte

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

remplacer par .

et changez l'attribut 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 

1
Selvin

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

En résumé:

  • step aide à définir le domaine des valeurs valides
  • la valeur par défaut step est 1
  • le domaine par défaut est donc des entiers (compris entre min et max, inclus, le cas échéant)

Je suppose que cela confond avec l’ambiguïté de l’utilisation d’une virgule comme séparateur de mille par rapport à une virgule de virgule décimale, et votre 51,983 est en fait un chiffre étrangement analysé de cinquante et un mille neuf cent huit.

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

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

Ce n'est peut-être pas joli, 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
Matty K

Je ne sais pas si cela aide, mais j'ai trébuché ici en cherchant le même problème, mais seulement d'un point de vue input (c'est-à-dire que j'ai remarqué que mon <input type="number" /> acceptait à la fois une virgule et un point lorsque je tapais la valeur, mais seul ce dernier était lié au modèle angularjs que j’ai assigné à l’entrée) ..__ donc j’ai résolu en notant cette directive rapide:

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

Ensuite, sur mon code HTML, il suffit de: <input type="number" ng-model="foo" replace-comma /> pour remplacer les virgules par des points à la volée afin d’empêcher les utilisateurs de saisir des nombres incorrects (du point de vue javascript, pas du local!). À votre santé.

1
Andrea Aloi

Utilisez lang attribut sur l'entrée. Paramètres régionaux 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 séparateurs sont valables.

0
zian974

une des options est javascript parseFloat()... ne jamais analyser un "text chain" --> 12.3456 avec un point vers un int ... 123456 (int supprimer le point) analyser une chaîne de texte en FLOAT. ..

pour envoyer ces coordonnées à un serveur, envoyez une chaîne de texte. HTTP envoie seulement TEXT

dans le client, évitez d'analyser les coefficients d'entrée avec "int", utilisez des chaînes de texte

si vous imprimez les cordons dans le code HTML avec php ou similaire ... flotter au texte et imprimer en HTML

0
Llanis

Autant que je sache, HTML5 input type="number renvoie toujours input.value sous la forme string. 

Apparemment, input.valueAsNumber renvoie la valeur actuelle sous forme de nombre à virgule flottante. Vous pouvez utiliser ceci pour renvoyer une valeur que vous voulez. 

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

0
Jason Gennaro