Skip to main content
adicionou 39 caracteres ao conteúdo
Fonte Link
Allan Andrade
  • 6,5mil
  • 1
  • 19
  • 49

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 valorvalor_bruto = parseInt($('#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="number"type="text" id="client-number" class="form-control" autofocus pattern="[0-9]*" inputmode="numeric" min="0" max="9999"
               name="number" value="0000" />

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

$('#client-number').keyup(function(){
    var valor = parseInt($('#client-number').val());
    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="number" id="client-number" class="form-control" autofocus pattern="[0-9]*" inputmode="numeric" min="0" max="9999"
               name="number" value="0000" />

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

adicionou 170 caracteres ao conteúdo
Fonte Link
Allan Andrade
  • 6,5mil
  • 1
  • 19
  • 49

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

$('#client-number').keyup(function(){
    var valor = parseInt($('#client-number').val());
    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();
  returnstr = 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="number" id="client-number" class="form-control" autofocus pattern="[0-9]*" inputmode="numeric" min="0" max="9999"
               name="number" value="0000" />

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

UPDATE: ALTEREI PARA O EVENTO keyup

$('#client-number').keyup(function(){
    var valor = parseInt($('#client-number').val());
    var novoValor = pad(valor, 4);
    $('#client-number').val(novoValor);
});


function pad (str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}
<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" value="0000"/>

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

$('#client-number').keyup(function(){
    var valor = parseInt($('#client-number').val());
    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="number" id="client-number" class="form-control" autofocus pattern="[0-9]*" inputmode="numeric" min="0" max="9999"
               name="number" value="0000" />

adicionou 64 caracteres ao conteúdo
Fonte Link
Allan Andrade
  • 6,5mil
  • 1
  • 19
  • 49

FizSem utilizar libs externas, além do jQuery que você já utiliza, fiz o exemplo abaixo com a formatação ao deixar o FOCO do componente (blur)... pode alterar para o evento que quisersolicitada.

UPDATE: ALTEREI PARA O EVENTO keyup

$('#client-number').blurkeyup(function(){
    var valor = parseInt($('#client-number').val());
    var novoValor = pad(valor, 4);
    $('#client-number').val(novoValor);
});


function pad (str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}
<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" value="0000"/>

Fiz o exemplo abaixo com a formatação ao deixar o FOCO do componente (blur)... pode alterar para o evento que quiser.

$('#client-number').blur(function(){
    var valor = parseInt($('#client-number').val());
    var novoValor = pad(valor, 4);
    $('#client-number').val(novoValor);
});


function pad (str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}
<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" value="0000"/>

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

UPDATE: ALTEREI PARA O EVENTO keyup

$('#client-number').keyup(function(){
    var valor = parseInt($('#client-number').val());
    var novoValor = pad(valor, 4);
    $('#client-number').val(novoValor);
});


function pad (str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}
<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" value="0000"/>

Fonte Link
Allan Andrade
  • 6,5mil
  • 1
  • 19
  • 49
Carregando