Como fazer um input mask que tenha mais de uma máscara possível?

Question

Estou fazendo um formulário e usando o componente react-input-mask. Estou na parte do campo de telefone, e gostaria de aceitar tanto o formato de telefone fixos ‘(99) 9999-9999’ ou telefones móveis ‘(99) 9 9999-9999’, porém depois de ler a documentação não consegui descobrir como fazer isso.

<InputMask onBlur={(e) => this.handleBlur('telefone', e.target.value)}
           type="text"
           defaultValue={new_item.telefone}                        
           class='inputTextCriar'
           mask="(99) 9999-9999">
</InputMask>

Esse é o código no momento, gostaria de fazer com que esse mesmo campo aceitasse os dois formatos. Agradeço desde já!

input mask javascript react

Lucas Pereira de Souza · Answer

Eu encontrei essa solução como um componente externo

import React, { useState } from 'react';
import InputMask from 'react-input-mask';

const PhoneInput = ({ className, ...props }) => {
  const [mask, setMask] = useState("(99) 99999-9999");

  return (
    <InputMask
      {...props}
      mask={mask}
      onBlur={e => {
        if (e.target.value.replace("_", "").length === 14) {
          setMask("(99) 9999-9999");
        }
      }}
      onFocus={e => {
        if (e.target.value.replace("_", "").length === 14) {
          setMask("(99) 99999-9999");
        }
      }}
    >
      {inputProps => <input {...inputProps} type="tel" />}
    </InputMask>
  );
};

export default PhoneInput;

acredito que se você criar esse componente e importar ele irá funcionar

Como fazer um input mask que tenha mais de uma máscara possível?

One Answer

Add your own answers!

Ask a Question