Keyup allow it to contain only one dot between input characters

Asked

Viewed 407 times

5

Personal how to allow it to contain only one point (.) between the characters typed in the input by checking with the jquery keyup event.

Example of an exit:

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

  • Remember to adjust the cursor position when filtering this type of input that changes the string size, otherwise it looks terrible to use the input.

3 answers

2

I created a function called validaPontos() that will return the amount of dots that are in the field. after this compare only if it is greater than or equal to two and remove the character.

Example:

$('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" />

Updated If the user tries to type a dot in the middle the last point of the string will be removed!

Or you can also use a plugin for these validations: Maskmoney

Example of Use:

$('#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" />

  • In this case, if I put a dot in the middle to the other characters, the dot stands and leaves the last character.

  • @Samirbraga is true! is more boring than I thought kkkk.

  • @Samirbraga gives a look.

1

Well... it gave me a certain job, but I think I finally got something quite interesting. Look:

With the existence of a point, if you try to add another after this you will not be able, for that the point should be deleted. Instead of the onKey, I used the onInput, which will detect if something is changed, with this the user can "browse" enters the reading without being played to the end of the input, beyond the question of performance, in which case the exclusion of the.

$('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" />

  • follows this logic itself, however if the user deletes the first used point he will not be able to type again

  • This is really a serious problem.. I will try to solve it and edit the answer...

  • @Gabrielrodrigues, take a look at this issue.

  • +1, this same as mine, I identified a problem in ours, Voce can say which and ?

  • What is this problem you identified? I don’t understand. A problem still persists?

  • The problem is not allow more than 1 point right? after you have typed the first point it should not be modified. our algorithms remove the last point, that is, if Voce has 123,456 and add a point in 1 will be 1.23456 and thus delete the first point that should be by default

  • I get it. It’s really boring. I can try to adjust it, but we’ll see what the author thinks, first of all. :)

  • No doubt, as I said in my reply, if you are going to take this validation to a whole system and advised to use a mask plugin to facilitate.

Show 3 more comments

1

I got a more "compact" mode similar to @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" />

  • Smigol, The problem is when the user tries to insert points in the middle of the input, if he does this will give error in his code.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.