danileao / youtube-input-mask

🔖 Sobre

Nesse projeto você poderá ver como criar input masks personalizados, de acordo com as necessidades do seu projeto.

Nele utilizamos regex para fazer a formatação e validação dos nossos inputs!

🗂 Material de apoio

• Typescript
• Typescript no React
• Regex

👍🏻 Como baixar

    // Clonar repositório
    $ git clone https://github.com/danileao/youtube-input-mask.git

    // Acessar diretório
    $ cd youtube-input-mask

    // Instalar dependências
    $ yarn

    // Iniciar projeto
    $ yarn start

---

youtube-input-mask's Issues

Formatação incorreta da máscara ao dar blur no input

Durante a visualização do tutorial notei que há um bug no código. Durante o minuto 51:17 do vídeo onde é ensinado esse método de máscara(aqui para quem não viu) é digitado no campo o valor 1.222.222.552,22, mas no console o valor resultante imprimido é 122.222.255,222.

Não sei exatamente qual foi a causa desse bug, mas mexendo um pouco no código eu consegui resolve-lo, e a solução encontrada foi utilizar o evento de onChange ao invés do onKeyUp. Gostaria de compartilhar aqui a solução pra caso outra pessoa se encontre na mesma situação. Também modifiquei a forma que a prop mask é passada para o input (passei a passar a função da mask ao invés de uma string).

Meu código então ficou dessa forma:

// MaskedInput.tsx
import { InputHTMLAttributes, ChangeEvent } from "react";

interface IMaskedInputProps extends InputHTMLAttributes<HTMLInputElement> {
  mask(event: ChangeEvent<HTMLInputElement>): ChangeEvent<HTMLInputElement>
}

function MaskedInput({ mask, onChange, ...props }: IMaskedInputProps) {
  function applyMask(event: ChangeEvent<HTMLInputElement>) {
    onChange?.(mask(event));
  }

  return (
    <input {...props} onChange={applyMask} />
  )
}

export default MaskedInput;

// masks.ts - no meu caso só tenho a máscara de cnpj
import { ChangeEvent } from "react";

export function cnpj(event: ChangeEvent<HTMLInputElement>) {
  event.currentTarget.maxLength = 18;

  let value = event.currentTarget.value;

  // Removes all non-numeric characters
  value = value.replace(/\D/g, "");

  // Separates the first two digits from the rest with a '.'
  // E.g.: 11.1
  value = value.replace(/^(\d{2})(\d)/, "$1.$2");
  
  // Separates the next three digits from the rest with a '.'
  // E.g.: 11.111.1
  value = value.replace(/^(\d{2}).(\d{3})(\d+)$/, "$1.$2.$3");
  
  // Separates the next three digits from the rest with a '/'
  // E.g.: 11.111.111/1
  value = value.replace(/^(\d{2}).(\d{3}).(\d{3})(\d+)$/, "$1.$2.$3/$4");
  
  // Separates the last two digits from the rest with a '-'
  // E.g.: 11.111.111/1111-11
  value = value.replace(/^(\d{2}).(\d{3}).(\d{3})\/(\d{4})(\d+)$/, "$1.$2.$3/$4-$5");

  // Updates change event with masked value
  event.currentTarget.value = value;

  return event;
}