Tenho um input do tipo numérico, que deve receber apenas números (óbvio).
No entanto, alguns navegadores deixam o usuário digitar alfanuméricos.
Porém, o problema não é só esse.
Preciso que sejam mostrados 0 à esquerda enquanto o valor do input não tenha atingido o limite de 4 caracteres desconsiderados os zeros à esquerda.
Por exemplo: o valor inicial do campo é 0000 e o uzuário digita 1, logo o input deve ter o valor 0001.
Tentei com Jquery Mask, mas ele apenas limita o tipo de dado e a quantidade de caracteres, mas não faz a formatação de zeros à esquerda.
$(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" />