-1

Estava desenvolvendo um projeto simples, e precisei utilizar máscaras em um determinado formulário. Optei, naquele momento, pelo uso do JQuery com a biblioteca JQuery Mask Plugin.

$(document).ready(function(){
  $('.dinheiro').mask('000.000.000,00', {reverse: true});
});

Mas o JQuery está entrando em conflito com o Angular ao manipular o DOM, então tive que remover o JQuery das dependências.

De que forma posso fazer uma implementação de uma máscara com JavaScript puro?

5
  • 1
    Além da implementação nativa, uma alternativa seria o ngx-mask
    – renanvm
    Commented 12/11/2019 às 16:58
  • 1
    Aqui: pt.stackoverflow.com/questions/241620/…
    – LeAndrade
    Commented 12/11/2019 às 17:01
  • @renanzin deu certo, mas ainda quero saber o que acontece "por baixo dos panos" em uma máscara Commented 12/11/2019 às 17:33
  • obs: Esse mask é muito ruim, fora que ele não funciona muito bem pra celular... Commented 12/11/2019 às 18:00
  • para evitar conflitos, use: jQuery.noConflict(); Commented 12/11/2019 às 18:02

1 Resposta 1

0

Usei o regex que estava numa resposta aqui, no link o usuário que respondeu também explica a expressão regular.

function validaCampo(c) {
      let valor = c.value;
      
      if(/([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/.test(valor)) {
        c.style.backgroundColor = "green"; 
         } else {
        c.style.backgroundColor = "red";
      }
}
* {
  margin: 0;
  box-sizing: border-box;
}

.validable-field {
  display: block;
  width: 180px;
  margin: auto;
  margin-top: 5%;
}
<input class="validable-field" type="text" onBlur="validaCampo(this)" placeholder="Exemplo: 000.000.000-00">

<input class="validable-field" type="text" onBlur="validaCampo(this)" placeholder="Click para dar onBlur">

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 .