0

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á!

1 Resposta 1

2

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

1
  • 1
    Boa irmão! deu certo, só se eu botar o formato do número fixo ele só 'adapta' quando eu saio do campo, mas tá tranqulo. Obrigado!! Commented 22/07/2020 às 17:52

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 .