-1

Preciso criar uma máscara para por o hífen no penúltimo número, automaticamente, desde que ele tenha pelo menos 5 caracteres, em um input de contas bancárias, usando JS puro. Assim: xxxx-x | xxxxx-x | xxxxxx-x.

<div class="form-group" align="center">
   <label for="cc-nome">Número da conta</label>
   <input type="text" class="line-animation" placeholder="" name="conta"  value="0000-0" required>
   <div class="line"></div>
</div>

1

2 Respostas 2

-1

Resolvi da Seguinte forma:

function FormataDado(campo, tammax, pos, teclapres) {   
  var keyCode; 
  if (teclapres.srcElement) 
  {
    keyCode = teclapres.keyCode; 
  } else  if (teclapres.target) 
  {
  keyCode = teclapres.which; 
  }
  if (keyCode == 0 || keyCode == 8) { return true; }  
  if ((keyCode < 48 || keyCode > 57) && keyCode != 88 && (keyCode != 120)) { return false; }  
  var tecla = keyCode; 
  vr = campo.value;   
  vr = vr.replace("-", "");   
  vr = vr.replace("/", ""); 
  
  tam = vr.length;
  if (tam < tammax && tecla != 8) 
  { tam = vr.length + 1; } 
  if (tecla == 8) 
{
    tam = tam - 1; 
}
  if (tecla == 8 || tecla == 88 || tecla >= 48 && tecla <= 57 || tecla >= 96 && tecla <= 105 || tecla == 120) 
{
  if (tam <= 2) 
{
      campo.value = vr; 
}
  if (tam > pos && tam <= tammax) 
{
campo.value = vr.substr(0, tam - pos) + "-" + vr.substr(tam - pos, tam); 
}
}
}
<input type="text" class="line-animation" placeholder="" name="conta" id="ContaB" value="0000" required onkeypress="return FormataDado(this,12,1,event);"/>

-3

    function formatarContaBancaria(input) {
      // remove todos os caracteres que não são números
      let numeroConta = input.value.replace(/\D/g, '');

      // adiciona o hífen no quinto último caractere, caso a conta tenha pelo menos 5 caracteres
      if (numeroConta.length >= 5) {
        numeroConta = `${numeroConta.slice(0, -1)}-${numeroConta.slice(-1)}`;
      }

      // atualiza o valor do campo com a conta formatada
      input.value = numeroConta;
    }


    const campoConta = document.querySelector('input[name="conta"]');
    campoConta.addEventListener('input', () => formatarContaBancaria(campoConta));
<div class="form-group" align="center">
    <label for="cc-nome">Número da conta</label>
    <input type="text" class="line-animation" placeholder="" name="conta" value="0000-0" required>
    <div class="line"></div>
</div>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    17/03/2023 às 19:34

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