jQuery - Field with a maximum of 4 digits and complete with 0 to the left

Navigation
2

I need a field where a maximum of 4 numbers can be entered and, if the user enters less than 4 digits, the 4 digits are filled with leading zeros, and do not accept values such as 0, 00, 000, or 0000 .

I made the code below by setting a 4-digit mask with input mask and doing the correct checks to remove the entered value if it is one of the values quoted above (0, 00, 000 or 0000) or complete with zeros if it is but I could not identify the reason why it is clearing the value typed when you focus the field after typing a valid value, instead of completing with leading zeros or keeping the value typed. 

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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>Número<inputtype="text" id="numero" name="numero" maxlength="4"/>
    
asked by anonymous 21.08.2018 / 16:19

3 answers

4

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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>Número<inputtype="text" id="numero" name="numero" maxlength="4"/>
    
21.08.2018 / 17:04
1

No if , removes all other zeros, compares only to zero num === 0

There you have it: 

// 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,''));
    
21.08.2018 / 16:51
1

Dude I made an example for you.

  
  • 1 - You do not need to use Mask for this because you are already setting maxlenght in Html.
    •   
  • 2 - Your code only had a small error, in the while line to get the size is not size , but, 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>Número<inputtype="text" id="numero" name="numero" maxlength="4"/>
    
21.08.2018 / 17:08
Select from previous months I need to return the null values of this inner join