5

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" />

4
  • Tem esse exemplo aqui: jsfiddle.net/donmccurdy/3sQrm Você pode criar um JSFiddle também com o seu código, isso estimula melhores respostas a meu ver Commented 10/01/2017 às 19:07
  • 1
    Já viu essa pergunta? Commented 10/01/2017 às 19:07
  • Já vi @Renan, eu consigo colocar os zero à esquerda. Existem mil maneiras de fazer isso, mas não consigo colocar os 0 e ainda limitar à 4 caracteres ao mesmo tempo. Vou colocar uns exemplos de código já tentei Commented 10/01/2017 às 19:13
  • Limitei os caracteres e coloquei para formatar ao digitar... falta alguma coisa? Commented 11/01/2017 às 0:14

2 Respostas 2

6

Pode utilizar o jQuery.maskMoney com algumas mudanças nas configurações do input para type="text" e maxlength="4", e no maskMoney: precision:3 e decimal:'' :

Código exemplo:

$(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]*">


Outro solução é utilizar jquery.maskedinput com as seguintes configurações:

$("#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]*">

Observação: não tem nada pronto sobre o assunto, fiz uma varredura na internet, e não encontrei nada melhor do que isso, mas, ainda vou dar mais um pesquisadas

Referencias:

4
  • Quase funciona. Esse código tem um bug. Tente colocar um dígito antes de todos os zeros, ele continua lá, mesmo ultrapassando o limite que é 4 digitos Commented 10/01/2017 às 20:18
  • @RivaJunior, fiz mais um exemplo com jquery.maskedinput esse pode ser uma solução viável mediante a um comportamento não visto no outro plugin, o mais engraçado que o html aceitou a digitação de 5 números inflingido as regras impostas de maxlength, o segundo acredito ser melhor para o que precisa.
    – novic
    Commented 10/01/2017 às 23:39
  • 1
    ficou ótimo seu segundo exemplo, só reparei um problema no firefox. Ele não deixa o usuário navegar pelas setas direcionais do teclado. Commented 11/01/2017 às 19:30
  • 1
    @RivaJunior olha, estamos, vendo ai para fazer um pacote para isso em um grupo javascript, por enquanto o segundo exemplo é a melhor solução aparente, quando sair algo eu posto e lhe aviso . Sobre navegadores, é o nosso grande problema, não fazem tudo como deveriam fazer.
    – novic
    Commented 11/01/2017 às 19:33
5

Sem utilizar libs externas, além do jQuery que você já utiliza, fiz o exemplo abaixo com a formatação solicitada.

UPDATE 01: ALTEREI PARA O EVENTO keyup

UPDATE 02: LIMITAÇÃO DE 4 CARACTERES

UPDATE 03: SELECIONAR TUDO AO RECEBER O FOCO

UPDATE 04: Funcionando em diversos 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" />

3
  • @VirgilioNovic, código atualizado e funcionando no firefox. Obrigado pela observação! Commented 11/01/2017 às 1:25
  • Ok removido comentario
    – novic
    Commented 11/01/2017 às 1:43
  • @AllanAndrade gostei da ideia de selecionar tudo ao receber foco. A implementação está funcionando, porém no somente no firefox é possível navegar pelo input utilizando as direcionais do teclado. E quando é deletado um número no começo, por exemplo, o cursor volta ao final do input, achei isso um pouco irritante. No mais, seu código está ótimo! Commented 11/01/2017 às 19:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .