Jump to content

Formatação automática de data, celular, etc


John Hebert Trindade
Go to solution Solved by John Hebert Trindade,

Recommended Posts

Tenho o código abaixo em javascript para configurar os formatos do campo: data, telefone, celular, etc que esta funcionando perfeitamente, feitos por este video: https://youtu.be/r-8isv_TnVA?si=GWCLT-xY58QsWmay

No formulário em html basta adicionar na tag input (ex. data-js="tel")

Criar um arquivo js e adicionar o código abaixo.

const masks = {
  date(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{2})(\d)/, '$1-$2')
      .replace(/(-\d{2})(\d)/, '$1-$2')
      .replace(/(-\d{4})\d+?$/, '$1')
  },

  tel(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '(+$1) $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/( \d{3})\d+?$/, '$1')
  },

  tlm(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '(+$1) $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/( \d{3})\d+?$/, '$1')
  },

  nif(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(.\d{3})\d+?$/, '$1')
  },

  cnp(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1-$2')
      .replace(/(-\d{2})\d+?$/, '$1')
  },

  postal(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{4})(\d)/, '$1-$2')
      .replace(/(-\d{3})\d+?$/, '$1')
  }
}

document.querySelectorAll('input').forEach(($input) => {
  const field = $input.dataset.js

  $input.addEventListener(
    'input',
    (e) => {
      e.target.value = masks[field](e.target.value)
    },
    false
  )
})

Mas se existir algum campo que não entra na validação Ex. nome, data, cidade entre outros, da o seguinte erro:

Uncaught TypeError: masks[field] is not a function
    at HTMLInputElement.<anonymous> (custom_adms.js:730:36)

Erro esse que não influencia na funcionalidade, mas gostaria de resolver.

 

Link to comment
Share on other sites

  • Solution

O erro esta na linha abaixo marcada.

faltou colocar o que iria procurar na campo input, sei que tem um nome especifico mas no momento não me veio a cabeça.

document.querySelectorAll('input        ['data-js']          ').forEach(($input) => {  //faltou adicionar nesta linha ['data-js']
  const field = $input.dataset.js

  $input.addEventListener(
    'input',
    (e) => {
      e.target.value = masks[field](e.target.value)
    },
    false
  )
})

 

Link to comment
Share on other sites

  • 2 months later...
Em 22/02/2024 às 23:37, John Hebert Trindade disse:

Agora estou com outro problema neste mesmo código.

O código funciona bem, e quando digito formata como quero.

Mas se o valor estiver errado não consigo corrigir, tenho que selecionar todo apagar e voltar a introduzir.

Como posso corrigir?

 

No evento, valida se o caractere introduzido não é um backspace.
Se calhar vais ter de alterar para um evento de keyup e fazer a validação por ai

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.