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/

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.

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

Selon le spécification , vous pouvez utiliser anycomme valeur d' stepattribut:

<input type="number" step="any">

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.

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)!

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é.

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.

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

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

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

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

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

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

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>

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:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

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

  })

});

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.