jQuery - Field with maximum 4 digits and complete with 0 left

Question

I need a field where 4 numbers can be entered at most, and if the user enters less than 4 digits, the 4 digits are completed with zeros on the front, and does not accept values such as 0, 00, 000 or 0000.

I made the code below by setting a 4 digit mask with the input mask and making appropriate checks to remove the entered value if it is one of the above values (0, 00, 000 or 0000) or complete with zeros if valid, however I could not identify why it is cleaning the entered value by taking the focus of the field after typing a valid value, instead of completing with zeros to the left or keeping the entered value.

jQuery(function($){
    $("#numero").mask("9999");
    $("#numero").bind("change focusout", function (){
       var num = $(this).val();
       if (num == 0 | num == 00 | num == 000 || num == 0000){
          $(this).val('');
       }
       else{
          while (num.size < 4){
             num = 0 + num;
             $(this).val(num);
          }
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Número <input type="text" id="numero" name="numero" maxlength="4"/>

Answer 1

You have to set the option autoclear: false.

And your if should be: if (num == '0___' || num == '00__' || num == '000_' || num == '0000')

jQuery(function($){
    $("#numero").mask("9999", {
      autoclear: false
    });
    $("#numero").bind("change focusout", function (){
       var num = $(this).val();
       if (num == '0___' || num == '00__' || num == '000_' || num == '0000'){
          $(this).val('');
       }
       else{
          num = num.replace('_','').replace('_','').replace('_','');
          while (num.length < 4){
             num = '0' + num;
             $(this).val(num);
          }
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Número <input type="text" id="numero" name="numero" maxlength="4"/>

Answer 2

In the if, removes the remaining zeros, compares only with a zero num === 0

There in Isis, you replaced by this:

// Transforma o valor do input num array, e automáticamente coloca um zero pros valores q não forem imputados
var arr = n.toString(10).replace(/\D/g, '0').split('').map(Number);
// Transforma o array numa string
var newNumber = arr.toString();
// Add o valor no input, removendo as virgulas.
$(this).val(newNumber.replace(/,/g,''));

Answer 3

Dude I made an example for you.

• 1 - You do not need to use the Mask for this because you are already setando maxlenght in Html.
• 2 - Your code only had one small error, on the line of while to catch the size is not size, but, yes lenght.

$("#numero").on("change", function(){
   var num = $(this).val(); 
       
   if (num == 0 | num == 00 | num == 000 || num == 0000){
      $(this).val('');
   }
   else{
      while (num.length < 4){
          num = 0 + num;
          $(this).val(num);
      }
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Número <input type="text" id="numero" name="numero" maxlength="4"/>