Input mask with leading zeros

Navigation
5

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

However, some browsers let the user type alphanumeric characters.

But the problem is not just that.

I need to display 0 on the left as long as the input value has not reached the limit of 4 characters disregarded the leading zeros.

For example: the initial value of the field is 0000 and the uzuario type 1 must be 0001 .

I have tried with Jquery Mask, but it only limits the data type and number of characters, but it does not do 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><scriptsrc="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" />
    
asked by anonymous 10.01.2017 / 20:04

2 answers

6

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

Example code: 

$(function() {
  $("#tnumber").maskMoney({
    precision: 3,
    decimal: ''
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><scriptsrc="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]*">

Note: nothing is ready on the subject, I did a scan on the internet, and I did not find anything better than that, but I'll give it another lookup

References:

10.01.2017 / 20:37
5

Without using external libs, in addition to the jQuery you already use, I made the example below with the requested formatting.

UPDATE 01: ALTERED FOR THE EVENT keyup

UPDATE 02: 4 CHARACTER LIMITATION

UPDATE 03: SELECT ALL BY RECOGNIZING FOCUS

UPDATE 04: Running on multiple 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><inputtype="text" id="client-number" class="form-control" autofocus name="number" value="0000" />
    
10.01.2017 / 20:24
What is the difference between SSE and Ajax? Represent relationships in json