Do not insert zeros to the left of a number

Asked

Viewed 1,261 times

4

I have n inputs, which are created dynamically. What happens is that they cannot accept zeros left on the following occasions:

0.24 -> The system accepts

00.24 -> The system automatically removes the zero on the left by 0.24

034.55 -> The system automatically removes the zero on the left by 34.55

That is, the zero on the left is only possible when there is leaning to the left of the point.

To make all inputs dynamically, I am starting with the following function:

$(document).ready(function () {
    $('input').keypress(function(e) {
        // Verificar os zero à esquerda     

        }
    });
});

Is it possible here to check these conditions from scratch to the left? Or else using the onchage?

javascript

  • It is possible, just see if the information starts with zero and discard the key, but what is the actual problem you are trying to solve? What would be the problem of leaving the zero on the left and dealing with the application once the data is sent? This way you will have to treat situations like copy and paste, delete the point and two zeros "pull over" and a lot of conditions. It seems to me a XY problem.

  • @Bacco copy paste does not interest me, I just want to limit when the user is typing. The problem is that the client wants this validation in real time and I’m having trouble solving it..

  • So if he glues a number with 000.23 and send, all right? Your client is in big XY trouble.

  • @Bacco yes, send... When you paste the number 000.23, he records only 0.23. But the problem is writing, is a client who has nothing to criticize, so criticize here.

  • @Baccus may be the best option with the onchage in each input, no?

  • It would have to cover the input, the change and still have browser that does not pass the events correctly. If it’s too important, the solution can be a timer looking at the value and adjusting it. As long as you start with two zeros, switch to one. But there is something else to solve: you have to subtract a position from the cursor at each change, otherwise the typing is kind of "weird".

Show 1 more comment

2 answers

6


Follow an example using setInterval.

It was done this way to work directly on the value, regardless of the way the data was entered.

Test here:

var l = document.getElementsByClassName( 'zeros' );
setInterval( function(){
  for ( var i = 0; i < l.length; i++ ) {
    while( l[i].value.length > 1 && l[i].value.substring( 0, 1 ) == '0' && l[i].value.substring( 0, 2 ) != '0.' ) {
      var s = l[i].selectionStart;
      l[i].value = l[i].value.substring( 1 );
      l[i].selectionEnd = l[i].selectionStart = s - 1;
    }
  }
}, 75);
<input class="zeros" type="text"><br>
<input class="zeros" type="text"><br>
<input class="zeros" type="text"><br>

Characteristics:

  • Works by typing, copying and pasting and deleting characters;

  • works even if the text is changed by JS as it is based on content;

  • updates the cursor position in browsers modern (useful in case the change is caused by a Backspace or intermediate character deletion);

  • locates fields by class, facilitating implementation.

  • Here, let me insert 023.32 for example. copy perfect paste!

  • Okay, thank you! I’ll wait then.

  • 1

    @Bacco could only analyze now the updated answer. It was perfect! thanks!

2

This regular expression replaces the excess characters. In your case, the left zeros.

str = '0000.00';
str = str.replace(/^0+(?!\.|$)/, '');
console.log(str);

  • Please check that you are correct, I print the same https://jsfiddle.net/xxoLzrh6/

  • but only attributed to str...

Browser other questions tagged javascript

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