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


92

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

Alors maintenant, dans les champs où mon application affiche les coordonnées de longitude et de latitude, j'obtiens des trucs comme «51 983» où il devrait être «51,982559». Ma solution de contournement consiste à utiliser à la input type="text"place, mais j'aimerais utiliser l'entrée numérique avec un affichage correct des décimales.

Existe-t-il un moyen de forcer les navigateurs à utiliser un point décimal dans l'entrée numérique, quels que soient les paramètres locaux côté client?

(Il va sans dire que dans mon application, je corrige de toute façon cela côté serveur, mais dans ma configuration, j'ai également besoin que ce soit correct côté client (à cause de certains JavaScript)).

Merci d'avance.

MISE À JOUR À partir de maintenant, lors de l'enregistrement de la version 28.0.1500.71 de Chrome sous 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'stepattribut ne semblent pas fonctionner.

http://jsfiddle.net/AsJsj/


Avez-vous déjà trouvé une solution? Je rencontre presque le même problème sur Chrome 11 sous Windows.
Kostas

Pas encore de solution. La meilleure hypothèse est d'éviter cela (et utilisez input type = "text") jusqu'à ce que cela soit corrigé ...
chocolata

3
Il semble que cela dépend des paramètres régionaux de votre navigateur, dans mon chrome, je vois une virgule, dans le chrome de mon partenaire, je vois un point.
fguillen le


1
Comme je l'ai également découvert récemment, certains pays utilisent une virgule au lieu d'un «point décimal».
jbutler483

Réponses:


28

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 avec l'arabe. C'est parce que la BODYbalise reçoit l'attribut lang="ar-EG".

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 enveloppée dans un DIVattribut donné lang="en-US".

Ainsi, une solution à laquelle vous pouvez recourir est d'encapsuler vos entrées numériques avec un élément conteneur défini pour utiliser une culture qui utilise des points comme séparateur décimal.


3
Intéressant! Malheureusement, cela ne semble fonctionner que dans Firefox, pas dans Chrome (47.0.2526.106)
luis.ap.uyen

Même pas dans Firefox, en France
Aubin

8
Firefox respecte le paramètre de langue de la page. Chrome impose le séparateur décimal de l'OS ou du navigateur? Edge impose la virgule décimale, quels que soient les paramètres de langue de la page, du navigateur ou du système d'exploitation. Quel bordel.
bbsimonbb

1
Vous n'avez pas besoin de l'élément wrapper. Vous pouvez définir l' langattribut directement sur l'élément d'entrée.
Jenny O'Reilly

2
L' langattribut a fait la différence pour moi, merci!
spaark

23

Avec l' attribut step spécifié à la précision des décimales que vous voulez, et l' attribut lang [qui est défini sur une locale qui formate les décimales avec un point ], votre entrée numérique html5 acceptera les décimales. par exemple. prendre des valeurs telles que 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 en outre spécifier l' attribut max pour la valeur maximale autorisée.

Modifier Ajouter unattribut lang à l'élément d'entrée avec une valeur locale qui formate les décimales avec un point au lieu d'une virgule


28
Cela ne fonctionne toujours pas :-( Les ​​valeurs locales côté client transforment toujours le point décimal en virgule décimale, quel que soit le pas ou l'attribut de valeur. :-(
chocolata

12
D'après ce que je comprends, la question n'est pas d'avoir un séparateur décimal. La question est d'avoir '.' au lieu de ',' lorsque les paramètres régionaux du client préfèrent ','.
Emanuele Paolini

quel que soit le séparateur décimal que vous utilisez dans l'attribut step - le navigateur le localisera toujours. Autrement dit, avec votre exemple donné - dans la plupart des pays européens, le nombre affiché serait 10,56
khartvin

1
Je suis revenu et relu la question 5 ans plus tard et je me suis demandé pourquoi j'avais fourni la réponse ci-dessus. Voir la modification, s'il vous plaît
Peter

Cela ne fonctionnera pas non plus si les données sont enregistrées en utilisant ajax.
somsgod


7

Utilisez lang attribut 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 separtor sont valables.


6

Malheureusement, la couverture de ce champ d'entrée 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 compter sur une entrée chargée par programme [type = text] pour faire 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 prendre en charge les décimales (comme BB10)!


L'utilisation d'une bibliothèque comme number.js pourrait aider à résoudre les problèmes inhérents à la présence de plusieurs langues sur cette planète.
pintxo

5

Je ne sais pas si cela aide mais je suis tombé ici lors de la recherche de ce même problème, uniquement du point de vue de l' entrée (c'est-à-dire que j'ai remarqué que <input type="number" />j'acceptais à la fois une virgule et un point lors de la saisie de la valeur, mais seul ce dernier était étant lié 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 {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

Ensuite, sur mon html, simplement: <input type="number" ng-model="foo" replace-comma />remplacera les virgules par des points à la volée pour empêcher les utilisateurs de saisir des nombres invalides (d'un point de vue javascript, et non local!). À votre santé.


Salut Andrea, y a-t-il un moyen de faire cela sans Angular JS? Avec jQuery par exemple?
chocolata

5
Bien sûr, je suppose que vous pourriez écrire, sur une base d'entrée par nombre, quelque chose comme $("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});(une fois que votre page est complètement chargée avec toutes les entrées de nombre)
Andrea Aloi

2
Cet extrait de code ne fonctionne pas sur Chrome (testé avec la v60). Lors de la saisie 888,, la définition de la valuepropriété lève un avertissement indiquant qu'il 888.ne s'agit pas d'un nombre valide (l'expression rationnelle nécessite au moins un nombre après le point) et vide le champ. Taper un point fonctionne cependant, probablement parce que l'entrée considère sa valeur «en cours» et attend que plus de chiffres soient tapés
svvac

5

J'ai trouvé un article de blog qui semble expliquer quelque chose de lié:
type d'entrée HTML5 = nombre et décimales / flottants dans Chrome

En résumé:

  • l' stepaide à définir le domaine des valeurs valides
  • la valeur par défaut stepest1
  • donc le domaine par défaut est des entiers (entre minet 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 comme point décimal, et que vous 51,983êtes en fait un cinquante et un mille neuf cent huit-trois étrangement analysé.

Apparemment, vous pouvez utiliser step="any"pour élargir le domaine à tous les nombres rationnels de la gamme, 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.


Dans ce cas c'est une bonne chose que j'aie écrit un résumé et ensuite extrapolé, hein?
Matty K

1

Autant que je sache, le HTML5 input type="numberrevient toujours en input.valuetant que fichier string.

Apparemment, input.valueAsNumberrenvoie la valeur actuelle sous forme de nombre à virgule flottante. Vous pouvez l'utiliser pour renvoyer une valeur souhaitée.

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


Merci, cela pourrait être utile!
chocolata

Ce qui est amusant, c'est que input.valuerenvoie en fait un nombre canonique avec un point même s'il apparaît comme un coma. Alors vivant dans suce un pays du monde européen troisième ...
Klesun

0

Avez-vous envisagé d'utiliser Javascript pour cela?

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


Sur chrome avec l'entrée [type = nombre] ne fonctionne pas .. la virgule est toujours affichée.
Revious

0

une option est javascript parseFloat()... ne jamais analyser un " text chain" --> 12.3456avec un point sur un int ...123456 (int enlève le point) analyser une chaîne de texte en un FLOAT ...

pour envoyer ces coordonnées à un serveur, faites-le en envoyant une chaîne de texte. HTTPenvoie seulementTEXT

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

si vous imprimez les cordons dans le html avec php ou similaire ... float to text and print in html


0

1) 51,983 est un nombre de type chaîne n'accepte pas la virgule

donc 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);   
});

Consultez http://jsfiddle.net/ydf3kxgu/

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


En fait, définir le type comme texte est en effet presque la seule solution pour faire ressortir le point. En collaboration avec pattern="\d+\.\d{2}"je dirais même appeler ce UX acceptable ... Je laisse tomber la partie jquery, mais ...
Klesun

0

utiliser le modèle

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

bonne chance


1
Salut, je viens de le tester dans Chrome 62.0.3202.94 sur Windows 10. Cela ne fonctionne pas. Lorsque vous utilisez les boutons fléchés, l'entrée revient à la virgule au lieu du point (compte tenu des paramètres régionaux belges). Merci quand même.
chocolata

0

J'ai écrit un morceau de code personnalisé pour ce faire

Si vous souhaitez remplacer ,par ., supprimez complètement les fonctions translate_decimals .

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

function translate_decimals(side = 0)
{
	input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');

bincr.addEventListener('click', ()=>{
	if (input.hasAttribute('max'))
	{
		if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			let temp = input.value;
			input.value = "";
			input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
			translate_decimals(',');
		}
	}
});

bdecr.addEventListener('click', ()=>{
	if (input.hasAttribute('min'))
	{
		if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
			translate_decimals(',');
		}
	}
});
/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}
<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>


0

J'avais besoin de m'assurer que les valeurs pouvaient toujours être entrées avec une virgule au lieu d'un point comme séparateur décimal. Cela semble être un problème séculaire. Des informations générales peuvent être trouvées en suivant ces liens:

Je l'ai finalement résolu avec un peu de jQuery. Remplacement des virgules par des points onChange. Cela semble bien fonctionner jusqu'à présent dans les derniers Firefox, Chrome et Safari.

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

-1

Attribut d'étape HTML

<input type="number" name="points" step="3">

Exemple: si step = "3", les nombres légaux peuvent être -3, 0, 3, 6, etc.

 

Conseil: L'attribut step peut être utilisé avec les attributs max et min pour créer une plage de valeurs légales.

Remarque: L'attribut step fonctionne avec les types d'entrée suivants: nombre, plage, date, date / heure, datetime-local, mois, heure et semaine.


Mais ... mais la question porte sur les nombres décimaux, step="3"limiterait l'entrée à des nombres entiers seulement. Et le réglage le step="0.01"montre toujours comme un coma; c
Klesun
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.