2

Como fazer com JavaScript, para que um input tipo texto aceite apenas números inteiros e números decimais com até 2 casas decimais.

Ex:

1    - true
1,1  - true
1,11 - true


$("body").on("input", ".number", function(event){
    $(this).val(this.value.replace(/\D/g, ''));
})

2 Respostas 2

5

Você pode usar a propriedade pattern, que define o formato que o campo pode ter, usando uma expressão regular para tal:

/* deixa uma borda vermelha enquanto o campo estiver inválido */
input:invalid {
    border: 1px solid red;
}
<form>
<input type="text" pattern="^\d+(,\d{1,2})?$" required>
</form>

Explicando a regex:

\d+ é "um ou mais dígitos".

Em seguida, temos um trecho entre parênteses: uma vírgula seguida de \d{1,2} (um ou dois dígitos). E o ? depois dos parênteses torna todo este trecho opcional.

Ou seja, podemos ter vários dígitos, ou vários dígitos seguido de vírgula, seguido de um ou dois dígitos.

Além disso, a regex tem os marcadores ^ e $, que são respectivamente o início e fim da string. Assim, eu garanto que o campo só terá o que está especificado na regex.


O que o seu replace(/\D/g, '') está fazendo é substituir todos os \D (ou seja, qualquer caractere que não seja dígito) por '' (a string vazia). Ou seja, você está removendo tudo que não é um dígito do valor do campo (se o valor for, por exemplo, abc123!@#,:.x, o resultado do replace será 123 - tudo que não é dígito é removido). Por isso ele não funciona para validar o formato do campo.

0

input { box-sizing: border-box; width: 100%; border: 1px solid; outline: none; }
:valid { border-color: green; }
:invalid { border-color: red; }
<input pattern="\d+,?\d{0,2}" autofocus>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .