Input mask with zeros on the left

Question

I have a numerical type input, which should only receive numbers (obvious).

However, some browsers let the user type alphanumeric.

However, this is not the only problem.

I need 0 to be displayed on the left as long as the input value has not reached the 4 character limit disregarding the zeros on the left.

For example: the initial value of the field is 0000 and the uzuário digita 1, so the input must have the value 0001.

I tried with Jquery Mask, but it just limits the type of data and the amount of characters, but does not format zeros on the left.

$(document).ready(function () {
  //$('#client-number').mask('0000', {placeholder: '0000'});
  
  /*Esse foi o melhor script que consegui fazer, porem ele não permite backspace, delete nem arrows, o que torna a experiência ruim*/
  $('#client-number').keydown(function (evt) {
    var fieldVal = $(this).val();
    var key = evt.keyCode;
    var char = String.fromCharCode((96 <= key && key <= 105)? key-48 : key);
    if (!isNaN(char)) {
      fieldVal = $(this).val() + char;
    }
    if (fieldVal < 9999 && evt.which != 32) {
      $(this).val(paddy(fieldVal, 4));
      return false;
    } else {
      return false;
    }
  });
  function paddy(n, p, c) {
    var pad_char = typeof c !== 'undefined' ? c : '0';
    var pad = new Array(1 + p).join(pad_char);
    return (pad + n).slice(-pad.length);
  }
});

<script src="https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/dist/jquery.mask.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="client-number" class="form-control" autofocus pattern="[0-9]*" inputmode="numeric" min="0" max="9999"
                   name="number" />

Answer 1

You can use the jQuery.maskMoney with some changes in the settings of input for type="text" and maxlength="4", and in the maskMoney: precision:3 and decimal:'' :

Sample code:

$(function() {
  $("#tnumber").maskMoney({
    precision: 3,
    decimal: ''
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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="tnumber" maxlength="4" pattern="[0-9]*">

---

Another solution is to use jquery.maskedinput with the following settings:

$("#tnumber").mask("9999", { placeholder: "0", autoclear: false });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<input type="text" id="tnumber" maxlength="4" pattern="[0-9]*">

Observing: there is nothing ready on the subject, I did a scan on the internet, and I did not find anything better than this, but, I will give one more searched

_References:

• jQuery maskMoney
• Masked Input Plugin for jQuery

Answer 2

Without using external libs, besides the jQuery you already use, I did the example below with the requested formatting.

UPDATE 01: I CHANGED IT TO THE EVENT keyup

UPDATE 02: LIMITATION OF 4 CHARACTERS

UPDATE 03: SELECT ALL UPON RECEIVING FOCUS

UPDATE 04: Running on various browsers

$('#client-number').keyup(function(){
    var valor_bruto = $('#client-number').val().replace(/[^\d]/g, '');
    var valor = parseInt(0 + valor_bruto);
    var novoValor = pad(valor, 4);
    $('#client-number').val(novoValor);
});


$(document).ready(function() {
    $('#client-number').focus(function() { $(this).select(); } );
});

function pad (str, max) {
  str = str.toString();
  str = str.length < max ? pad("0" + str, max) : str; // zero à esquerda
  str = str.length > max ? str.substr(0,max) : str; // máximo de caracteres
  return str;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="client-number" class="form-control" autofocus name="number" value="0000" />