Permitir 2 casas decimais em <input type = "number">

Eu tenho um <input type="number">e quero restringir a entrada dos usuários apenas para números ou números com decimais com até 2 casas decimais.

Basicamente, estou pedindo uma entrada de preço.

Eu queria evitar fazer regex. Existe uma forma de fazer isso?

<input type="number" required name="price" min="0" value="0" step="any">

Em vez de step="any", que permite qualquer número de casas decimais, use step=".01", que permite até duas casas decimais.

Mais detalhes na especificação: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Se alguém estiver procurando por uma regex que permita apenas números com 2 casas decimais opcionais

^\d*(\.\d{0,2})?$

Por exemplo, eu achei a solução abaixo bastante confiável

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Por moeda, sugiro:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Consulte http://jsfiddle.net/vx3axsk5/1/

As propriedades "etapa", "min" e "padrão" do HTML5 serão validadas quando o formulário for enviado, não ativadas. Você não precisa do stepse tiver um patterne não precisa do patternse tiver um step. Então você pode voltar ao step="any"meu código, pois o padrão o validará de qualquer maneira.

Se você deseja validar o onblur, acredito que fornecer uma dica visual ao usuário também é útil, como colorir o fundo em vermelho. Se o navegador do usuário não suportar, type="number"ele fará o fallback para type="text". Se o navegador do usuário não suportar a validação de padrão HTML5, meu snippet JavaScript não impede o envio do formulário, mas fornece uma dica visual. Portanto, para pessoas com pouco suporte ao HTML5 e para pessoas que tentam invadir o banco de dados com o JavaScript desativado ou forjar solicitações HTTP, é necessário validar o servidor novamente de qualquer maneira. O ponto com a validação no front-end é para uma melhor experiência do usuário. Desde que a maioria dos usuários tenha uma boa experiência, não há problema em confiar nos recursos HTML5, desde que o código ainda funcione e você possa validar no back-end.

Etapa 1: Conecte sua caixa de entrada de número HTML a um evento onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

ou no código HTML

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Etapa 2: escreva o setTwoDecimalPlacemétodo

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

Você pode alterar o número de casas decimais variando o valor passado para o toFixed()método Veja os documentos MDN .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Eu descobri que usar o jQuery era minha melhor solução.

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Tente isso para permitir apenas 2 decimais no tipo de entrada

<input type="number" step="0.01" class="form-control"  />

Ou Use o jQuery, conforme sugerido por @SamohtVII

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Use este código

<input type="number" step="0.01" name="amount" placeholder="0.00">

Por padrão, o valor da etapa para os elementos de entrada HTML5 é step = "1".

apenas escreva

<input type="number" step="0.1" lang="nb">

lang = 'nb "permite escrever seus números decimais com vírgula ou ponto

Na entrada:

step="any"
class="two-decimals"

No script:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});