Eu vi que alguns navegadores localizam a input type="number"notação de números.

Então, agora, em campos onde meu aplicativo exibe coordenadas de longitude e latitude, recebo coisas como "51.983", onde deveria ser "51,982559". Minha solução alternativa é usar em input type="text"vez disso, mas gostaria de usar a entrada de número com a exibição correta de decimais.

Existe uma maneira de forçar os navegadores a usar um ponto decimal na entrada do número, independentemente das configurações locais do lado do cliente?

(Nem é preciso dizer que no meu aplicativo eu corrijo isso de qualquer maneira no lado do servidor, mas na minha configuração também preciso que esteja correto no lado do cliente (por causa de algum JavaScript)).

Desde já, obrigado.

ATUALIZAÇÃO A partir de agora, verificando a versão 28.0.1500.71 m do Chrome no Windows 7, a entrada de número simplesmente não aceita decimais formatados com uma vírgula. As sugestões propostas com ostepatributo não parecem funcionar.

http://jsfiddle.net/AsJsj/

Atualmente, o Firefox respeita o idioma do elemento HTML no qual a entrada reside. Por exemplo, tente este violino no Firefox:

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

Você verá que os numerais estão em árabe e a vírgula é usada como separador decimal, o que é o caso do árabe. Isso ocorre porque a BODYtag recebe o atributo lang="ar-EG".

Em seguida, tente este:

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

Este é exibido com um ponto como separador decimal porque a entrada está contida em um DIVdeterminado atributo lang="en-US".

Portanto, uma solução à qual você pode recorrer é envolver suas entradas numéricas com um elemento de contêiner que é configurado para usar uma cultura que usa pontos como separador decimal.

Com o atributo step especificado para a precisão dos decimais que você deseja, e o atributo lang [que é definido para um local que formata decimais com ponto ], sua entrada numérica html5 aceitará decimais. por exemplo. para assumir valores como 10,56; quero dizer 2 casas decimais, faça o seguinte:

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

Você pode ainda especificar o atributo max para o valor máximo permitido.

Editar Adiciona umatributo lang ao elemento de entrada com um valor local que formata decimais com ponto em vez de vírgula

De acordo com a especificação , você pode usar anycomo valor do stepatributo:

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

Use lang attribute na entrada. Localidade em meu aplicativo da web fr_FR, lang = "en_EN" no número de entrada e posso usar indiferentemente uma vírgula ou um ponto. O Firefox sempre exibe um ponto, o Chrome exibe uma vírgula. Mas ambos os separadores são válidos.

Infelizmente, a cobertura desse campo de entrada nos navegadores modernos é muito baixa:

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

Portanto, eu recomendo esperar o fallback e contar com uma entrada carregada programaticamente [type = text] para fazer o trabalho, até que o campo seja geralmente aceito.

Até agora, apenas Chrome, Safari e Opera têm uma implementação legal, mas todos os outros navegadores apresentam erros. Alguns deles, nem parecem suportar decimais (como o BB10)!

Não sei se isso ajuda, mas tropecei aqui ao procurar esse mesmo problema, apenas do ponto de vista de entrada (ou seja, percebi que <input type="number" />estava aceitando uma vírgula e um ponto ao digitar o valor, mas apenas o último estava sendo vinculado ao modelo angularjs atribuído à entrada). Então resolvi anotando esta diretiva rápida:

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

Então, no meu html, simplesmente: <input type="number" ng-model="foo" replace-comma />irá substituir vírgulas por pontos instantaneamente para evitar que os usuários insiram números inválidos (do ponto de vista de javascript, não de local!). Felicidades.

Encontrei um artigo de blog que parece explicar algo relacionado:
tipo de entrada HTML5 = número e decimais / flutuantes no Chrome

Em suma:

• o stepajuda a definir o domínio de valores válidos
• o padrão stepé1
• portanto, o domínio padrão são inteiros (entre mine max, inclusive, se fornecido)

Eu presumiria que isso se confunde com a ambigüidade de usar uma vírgula como separador de mil versus uma vírgula como ponto decimal, e seu 51,983é, na verdade, cinquenta e um mil, novecentos e oito e três estranhamente analisados.

Aparentemente, você pode usar step="any"para ampliar o domínio para todos os números racionais no intervalo, mas eu não tentei fazer isso sozinho. Para latitude e longitude, usei com sucesso:

<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">

Pode não ser bonito, mas funciona.

Pelo que entendi, o HTML5 input type="numbersempre retorna input.valuecomo um string.

Aparentemente, input.valueAsNumberretorna o valor atual como um número de ponto flutuante. Você pode usar isso para retornar o valor que deseja.

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

Você já pensou em usar Javascript para isso?

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

uma opção é javascript parseFloat()... nunca analise um " text chain" --> 12.3456com ponto para um int ...123456 (int remova o ponto) analise uma cadeia de texto para um FLOAT ...

para enviar estes coords para um servidor, faça isso enviando uma cadeia de texto. HTTPapenas enviaTEXT

no cliente, evite analisar as coordenadas de entrada com " int", trabalhe com strings de texto

se você imprimir os cabos no html com php ou similar ... flutue para o texto e imprima em html

1) 51.983 é um tipo de string, o número não aceita vírgula

então você deve defini-lo como texto

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

substituir com .

e alterar o atributo de tipo para número

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

Verificação de saída http://jsfiddle.net/ydf3kxgu/

Espero que isso resolva seu problema

use o padrão

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

boa sorte

Eu escrevi um código personalizado para fazer isso

Se você deseja substituir ,por ., remova as funções translate_decimals completamente.

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>

Eu precisava garantir que os valores ainda pudessem ser inseridos com uma vírgula em vez de um ponto como separador decimal. Este parece ser um problema antigo. Informações básicas podem ser encontradas seguindo estes links:

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

Eu finalmente resolvi com um pouco de jQuery. Substituindo as vírgulas por pontos onChange. Isso parece estar funcionando bem até agora no Firefox, Chrome e Safari mais recentes.

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

  $(this).change(function () {

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

    $(this).val($replace);

  })

});

Atributo de etapa HTML

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

Exemplo: se etapa = "3", os números legais podem ser -3, 0, 3, 6, etc.

Dica: O atributo step pode ser usado junto com os atributos max e min para criar um intervalo de valores legais.

Nota: O atributo step funciona com os seguintes tipos de entrada: número, intervalo, data, data e hora, data e hora local, mês, hora e semana.