13

Preciso inserir zeros à esquerda em um campo input text. Sendo que este campo pode ser até 5 caracteres + um dígito verificador Ou seja, preciso que o JavaScript preencha com zeros à esquerda de acordo com o que o usuário digitar, por exemplo:

123451 = 12345-1
12341 = 01234-1

ou

1236 = 00123-6

6 Respostas 6

14

Pode fazer uma função para corrigir o valor desse input. Algo como:

function pad(str, length) {
  const resto = length - String(str).length;
  return '0'.repeat(resto > 0 ? resto : '0') + str;
}

// exemplo de testes
var testes = [1, 10, 100, 1000];
testes.forEach((teste) => {
  var resultado = pad(teste, 3);
  console.log(resultado);
});

Adaptado ao teu caso ficaria assim:

function ajustarInput(str) {
  var adicionar = 6 - str.length;
  for (var i = 0; i < adicionar; i++) str = '0' + str;
  return str.slice(0, 5) + '-' + str.slice(-1);
}

document.getElementById('teste').addEventListener('click', function() {
  var input = document.getElementById('input');
  input.value = ajustarInput(input.value);
});
<input type="text" id="input" />
<button id="teste">Corrigir</button>

Essa função lê quantos caracteres faltam à string, e junta-lhe zeros. Depois separa o ultimo caractere e insere um - antes de retornar a nova string.

1
  • 2
    Perfeito!! @sergio precisava de algo prático
    – ivanp
    Commented 17/10/2014 às 22:52
10

Basta usar esta operação na string:

("000000"+str).slice(-6,-1)+'-'+("0"+str).slice(-1)


Se quiser incrementar, pode fazer um filtro antes, para remover os não numéricos:

str="000000"+str.replace(/\D/g,'');
str=str.slice(-6,-1)+'-'+str.slice(-1);


Demonstração:

document.getElementById('format').addEventListener('click', function () {
    var input = document.getElementById( 'entrada' );
    
    input.value="000000"+input.value.replace(/\D/g,'');
    input.value=input.value.slice(-6,-1)+'-'+input.value.slice(-1);
});
<input type="text" id="entrada">
<button id="format">Formatar</button><br>

3
  • 1
    nãssa, campeão isto aqui e +1+ pelo stack fiddle . . . com perdão da mágica do Sergio, o checkmark podia muito bem vir pra cá
    – brasofilo
    Commented 18/10/2014 às 3:18
  • ok foi a implementação que não funcionou @brasofilo o código é bom minha implementação que não rolou.
    – ivanp
    Commented 18/10/2014 às 14:48
  • 1
    A implementação do comentário aqui também não rolou, @Ivan :D Você tava querendo replicar na resposta do Renan :))
    – brasofilo
    Commented 18/10/2014 às 14:53
6

É só fazer algo do tipo:

var foo; // preencha esta variável com o seu texto.
/* sério, preencha foo. */
foo += ""; // só por paranóia. Se foo não era string até aqui, depois desta linha será.

while (foo.length < 5) {
    foo = "0" + foo;
}
// agora coloque foo de novo na caixa de texto.

Se o texto tiver cinco caracteres ou mais, ele pula o laço. Caso contrário, o código concatenará zeros a esquerda até que a string tenha cinco caracteres.

Note que esse código funciona para o texto a esquerda do seu dígito verificador. Você deve depois concatenar o dígito verificador no final do resultado.

5
  • entendi a lógica mas não funcionou a tua função @renan
    – ivanp
    Commented 17/10/2014 às 22:47
  • A função funciona beleza, @Ivan, provavelmente foi a sua implementação que bugou ;)
    – brasofilo
    Commented 18/10/2014 às 0:31
  • Funcionar, funciona, se o conteúdo de foo vier como string de antemão. Se um número (casos mais comuns para se simular um zerofill desse tipo) ela falha porque o objeto Number não tem uma propriedade length. Nada que um foo = foo.toString(); antes do loop não resolva. Commented 20/10/2014 às 18:03
  • @BrunoAugusto editei a resposta pra levar isso em consideração, valeu :) Commented 20/10/2014 às 19:16
  • Eu mudaria pra foo.toString(). Pelo menos não cheira a gambiarra. Commented 20/10/2014 às 19:36
2

Acredito que isso já resolva:

const n = '1236'
(n.slice(0, -1) + '-' + n.slice(-1)).padStart(7, '0')

Para um exemplo mais detalhado:

const inputNumber = document.getElementById('number')
inputNumber.addEventListener('keyup', e => handleDigits(e.currentTarget))
handleDigits(inputNumber)

function handleDigits(field) {
  let n = field.value.replace(/[^\d]/, '').replace(/^0+/, '')
  n = n || '0'
  
  const digitsBeforeTheHyphen = n.slice(0, -1)
  const lastDigit = n.slice(-1)
  const digitsWithHyphen = digitsBeforeTheHyphen + '-' + lastDigit
  const zeroesIncluded = digitsWithHyphen.padStart(7, '0')
  
  field.value = zeroesIncluded
}
<input type="text" id="number" value="1236">

1

Use a função padStart de String.prototype.padStart() Essa função recebe 2 parametros na qual o primeiro é do tipo number que representa o comprimento da string resultante e o segundo parametro é o caractere, ou caracteres, que deve preencher a string alvo. Caso o comprimento dessa essa string de preenchimento seja superior ao targetLength, ela será truncada a partir da direita

Exemplo:

const str1 = '5';

console.log(str1.padStart(3, '0'));
// Saída experada: "005"
0

Tem ainda a implementação em JavaScript do str_pad() do PHP feita pelo pessoal do PHP.JS:

function str_pad(input, pad_length, pad_string, pad_type) {
  //  discuss at: http://phpjs.org/functions/str_pad/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // improved by: Michael White (http://getsprink.com)
  //    input by: Marco van Oort
  // bugfixed by: Brett Zamir (http://brett-zamir.me)
  //   example 1: str_pad('Kevin van Zonneveld', 30, '-=', 'STR_PAD_LEFT');
  //   returns 1: '-=-=-=-=-=-Kevin van Zonneveld'
  //   example 2: str_pad('Kevin van Zonneveld', 30, '-', 'STR_PAD_BOTH');
  //   returns 2: '------Kevin van Zonneveld-----'

  var half = '',
    pad_to_go;

  var str_pad_repeater = function(s, len) {
    var collect = '',
      i;

    while (collect.length < len) {
      collect += s;
    }
    collect = collect.substr(0, len);

    return collect;
  };

  input += '';
  pad_string = pad_string !== undefined ? pad_string : ' ';

  if (pad_type !== 'STR_PAD_LEFT' && pad_type !== 'STR_PAD_RIGHT' && pad_type !== 'STR_PAD_BOTH') {
    pad_type = 'STR_PAD_RIGHT';
  }
  if ((pad_to_go = pad_length - input.length) > 0) {
    if (pad_type === 'STR_PAD_LEFT') {
      input = str_pad_repeater(pad_string, pad_to_go) + input;
    } else if (pad_type === 'STR_PAD_RIGHT') {
      input = input + str_pad_repeater(pad_string, pad_to_go);
    } else if (pad_type === 'STR_PAD_BOTH') {
      half = str_pad_repeater(pad_string, Math.ceil(pad_to_go / 2));
      input = half + input + half;
      input = input.substr(0, pad_length);
    }
  }

  return input;
}

document.getElementById( 'test' ).innerHTML = str_pad( 10, 5, 0, 'STR_PAD_LEFT' );
<div id="test"></div>

O interessante dessa função, além da parametrização completa (não apenas da string de entrada) é que considera outros cenários desnecessários ao tópico mas úteis em outras circunstâncias.

1
  • 2
    Vish... O snippet até funciona, mas o post ficou muito feio >.< Commented 20/10/2014 às 17:57

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 .