5

Pessoal como permitir que contenha apenas um ponto (.) entre os caracteres digitados no input fazendo a checagem com o evento keyup do jquery.

Exemplo de saida:

000.000000
1.000
99.9.99.999 // <- error não pode ter mais de 1 ponto

Code:

$('input').keyup(function(e){
  $(this).val(function() {
    var val = this.value;
    return val.replace(/(\.)+/g, function(char, str) {
      return str;
    });
  });
});

JSFIDDLE

1
  • Lembre-se de ajustar a posição do cursor quando filtrar este tipo de entrada que muda o tamanho da string, senão fica horrível de usar o input.
    – Largato
    Commented 3/12/2015 às 2:14

3 Respostas 3

2

Criei uma funcao chamado validaPontos() que retornara a quantidade de pontos que estiverem no campo. apos isto e so comparar se e maior ou igual a dois e se for remover o caracter.

Exemplo:

$('input').keyup(function(e) {
  var valor = this.value;
  var pattern = /\.(?=[^.]*$)/;
  if (validaPontos(valor) >= 2) {
    this.value = valor.replace(pattern, "");
  }
});

function validaPontos(valor) {
  var quantidadeDePontos = 0;
  for (var i = 0; i < valor.length; i++) {
    if (valor[i] === '.') {
      quantidadeDePontos++;
    }
  }
  return quantidadeDePontos;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" />

Atualizado Se o usuário tentar digitar um ponto no meio será removido o ultimo ponto da string!

Ou você pode também usar um plugin para essas validações: MaskMoney

Exemplo de Uso:

$('#currency').maskMoney();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>


<input type="text" id="currency" />

3
  • Nessa caso, se eu colocar um ponto ao meio aos outros caracteres, o ponto fica e sai o último caractere. Commented 3/12/2015 às 1:38
  • @SamirBraga é verdade! é mais chato do que me parecia kkkk. Commented 3/12/2015 às 10:06
  • @SamirBraga da uma olhada. Commented 3/12/2015 às 12:24
1

Consegui um modo mais "compacto" semelhante ao do @GabrielRodrigues

$('input').keyup(function(e) {
  $(this).val(function() {
    var val = this.value;
    if (val.split('.').length > 2) val = val.replace(/\.+$/, '');
    return val;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" />

1
  • Smigol, O problema é quando o usuario tenta inserir pontos no meio do input, se ele fizer isto dará erro no seu código. Commented 3/12/2015 às 12:27
1

Bem... isso me deu um certo trabalho, mas acho que finalmente consegui algo bastante interessante. Olhe:

Com a existência de um ponto, caso você tente acrescentar outro depois deste você não conseguirá, para isso o ponto deverá ser apagado. Ao invés do onKey, utilizei o onInput, que detectará se algo é mudado, com isso o usuário pode "navegar" entra as lestras sem ser jogado para o final da input, além da questão do desempenho, pois nesse caso é imperceptível a exclusão do ponto.

$('input').on("input", function(){
  var val = this.value;
  var test = /^[^.]?.[^.]*$/;
  if(test.test(val)){
    return;
  }else{
    var n = val.search(/\./);
    var beforeDot = val.substring(0, n);
    var dot = val.substring(n, n+1);
    var afterDot = val.substring(n+1, val.length);
    $(this).val(beforeDot.replace(/\./g, "") + dot + afterDot.replace(/\./g, ""));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />

8
  • segue esta logica mesmo, porem se o usuario apagar o primeiro ponto usado ele nao podera digitar novamente Commented 3/12/2015 às 0:54
  • Esse é realmente um problema sério.. tentarei solucioná-lo e editarei a resposta... Commented 3/12/2015 às 0:56
  • @GabrielRodrigues, dê uma olhada nessa edição. Commented 3/12/2015 às 20:59
  • +1, esta igual a minha, eu identifiquei um problema nas nossas, voce sabe dizer qual e ? Commented 3/12/2015 às 21:06
  • Do que se trata esse problema que você identificou? Não entendi. Ainda persiste um problema? Commented 3/12/2015 às 21:08

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 .