Optional character about react-input-mask HOT 37 OPEN

I can do it for 100$ )

from react-input-mask.

For example, in Brazil, some states have the phone number with one digit more. While some have 8 digits, others have 9 digits.

from react-input-mask.

For controlled inputs:

handlerChangeBrazilianPhone = (ev) => {
  const brazilianPhone = ev.target.value.replace(/[^0-9]+/g, '')
  this.setState({ brazilianPhone })
}
...
mask={this.state.brazilianPhone.length <= 10 ? '(99) 9999-9999?' : '(99) 99999-9999'}
formatChars={{ 9: '[0-9]', '?': '[0-9 ]' }}
onChange={this.handlerChangeBrazilianPhone}
value={this.state.brazilianPhone}

from react-input-mask.

I did like this

with: react-input-mask: ^2.0.4

import React from "react";
import InputMask, { InputState } from "react-input-mask";
import { TextField } from "@material-ui/core";

function PhoneMask() {
  const beforeMaskedValueChange = (newState: InputState) => {
    let { value } = newState;

    const newValue = value.replace(/\D/g, "");
    if (newValue.length === 11) {
      value = newValue.replace(/^(\d{2})(\d{5})(\d{4})$/, "($1) $2-$3");
    }

    return {
      ...newState,
      value
    };
  };

  return (
    <InputMask mask="(99) 9999-99999" maskChar={null} beforeMaskedValueChange={beforeMaskedValueChange}>
      {(props: any) => <TextField {...props} fullWidth label="Phone" name="phone" />}
    </InputMask>
  );
};

from react-input-mask.

Hi guys,

I had the same problem with the different formatted phone numbers. I solved using a mask like this:

<InputElement
    mask="(99) 9999tt999?" 
    formatChars={{"9": "[0-9]", "t": "[0-9\-]", "?": "[0-9 ]"}} 
    maskChar={null} />

Now both formats are accepted. As there is no placeholder character, it looks fine for the user.

from react-input-mask.

Have done. Just use this configuration:

<Input 
  mask="(99) 9999-99999?"
  formatChars={
    "9": "[0-9]",
    "?": "[0-9]"
  }
 />

from react-input-mask.

No meu caso funcionou da seguinte maneira:

mask={ formik.values.phone.length > 14 ? '(99) 99999-9999' : '(99) 9999-99999' }

espero que ajude 🙏

from react-input-mask.

mask={watch('phone')!.charAt(5) === '9' ? '(99) 9 9999-9999' : '(99) 9999-9999'}
doesn't this work too?
(using with react-hook-form)

from react-input-mask.

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

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

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

from react-input-mask.

const phoneMask = '+55 (99) 9999-9999';
const celphoneMask = '+55 (99) 99999-9999';
const [mask, setMask] = useState(phoneMask);

const changeMask = (e) => {
if (/^\+([0-9]+) \(([0-9]+)\) 9/.test(e.target.value)) {
if (mask !== celphoneMask) {
setMask(celphoneMask);
}
}
else if (mask != phoneMask) {
setMask(phoneMask);
}
}
<ImputMask mask={mask} maskChar="_" onChange={changeMask}>

from react-input-mask.

to whoever falls here searching for an react-number-format solution

          const s = values.phone
            .split(" ")
            .join("")
            .split(")")
            .join("")
            .split("(")
            .join("")
            .split("-")
            .join("")
            .split("_")
            .join("")

format={s.length < 11 ? "(##) ####-#####" : "(##) #####-####"}
mask={s.length < 10 ? "_" : ""}

from react-input-mask.

Deu certo assim aqui
<TextField error={touched.number && Boolean(errors.number)} helperText={touched.number && errors.number} label={i18n.t("contactModal.form.number")} name="number" variant="outlined" margin="dense" onKeyUp={e => { if (e.target.value.replace(/\D/g, "").length === 10) { let x = e.target.value.replace(/\D/g, "").match(/(\d{0,2})(\d{0,4})(\d{0,4})/); e.target.value = !x[2] ? x[1] : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : ""); } else { let x = e.target.value.replace(/\D/g, "").match(/(\d{0,2})(\d{0,1})(\d{0,4})(\d{0,4})/); e.target.value = !x[2] ? x[1] : "(" + x[1] + ") " + x[2] + " " + x[3] + (x[4] ? "-" + x[4] : ""); } }} />

from react-input-mask.

Great solution, @alymenbr!
But i don't think that the issue is solved, because all this solutions are just "work arounds" for a feature that does no exists.

from react-input-mask.

hi i want react mask for values 1 to 100
i am using "99%" mask but its not taking the 100 value i want to include the 100 max value also

from react-input-mask.

Hi guys, I used InputMask from react-input-mask and TextField from @material-ui/core and it works that way:

const [inputTextData, setInputTextData] = useState({
    celular: '',
});`

const handleInputTextChange = (event) => {
    const { name, value } = event.target;

    setInputTextData({...inputTextData, [name]: value});
} 

<InputMask
    mask={inputTextData.celular.length > 14 ? "(99) 99999-9999" : "(99) 9999-99999"}
    maskChar=""
    value={inputTextData.celular}
    onChange={handleInputTextChange}
>
    {() => (
        <TextField
            variant="outlined"
            type="tel"
            label="Celular"
            name="celular"
        />
      )}
</InputMask> 

Attention to the second condition on prop mask. It must be have 15 characters to can pass to the first condition.

from react-input-mask.

Does anyone has a solution to have a formatted input for currencies, like USD 1,000?

from react-input-mask.

Sure, but the difficult part is to have an <input> that auto-format the number as the user types it. Like autoNumeric in the jQuery world.

from react-input-mask.

I made it work on version 3, alpha 2. I'm using material UI and typescript. For anyone interested.

https://codesandbox.io/s/confident-bird-fek84?fontsize=14&hidenavigation=1&theme=dark

from react-input-mask.

perfect, @hugosbg 👌
thank you.

from react-input-mask.

Have done. Just use this configuration:

<Input 
  mask="(99) 9999-99999?"
  formatChars={
    "9": "[0-9]",
    "?": "[0-9]"
  }
 />

This solution does not solve the issue.

Unfortunately the presented mask is not correct, because is the first digit after the area code that should be optional.

Also, the five digit sequence is bad for reading.

A good solution would be using for instance "9" for mandatory positions and "0" for optional positions or vice versa like this:

(99) 0 9999-9999, with the empty mask like this (__) _ ____-____

The spaces around the optional digit should make the value easyer to read.

This package seems to be dead, will search for other options

from react-input-mask.

Don't understand. How should optional char act?

from react-input-mask.

Hi @sanniassin, any progress?

Thanks! :)

from react-input-mask.

@CezarLuiz0 Pretty busy right now, so this project temporarily abandoned :)

from react-input-mask.

Can I fork this project and send pull requests with new features?

Thanks!

from react-input-mask.

Sure, but i will not be able to review and test PR for a while.

from react-input-mask.

Hi guys! Is there any progress on this feature?

from react-input-mask.

Ok, please do it then)

from react-input-mask.

Thank you!)

from react-input-mask.

Guys, is this issue solved?

from react-input-mask.

Not yet :/

from react-input-mask.

Does not last solution fit?

from react-input-mask.

Hey guys, how is this issue?

from react-input-mask.

There is Intl standard. You can use react Intl as well

from react-input-mask.

@mquandalle I use http://numeraljs.com/ for this solving this task

from react-input-mask.

Hi guys,
I have a issue with creating mask for zipcode US, as some 5 digits, and some have 9 digits, I try to make a "work around" like this :
mask="99999?????" formatChars={{ 9: '[0-9]', '?': '[-\0-9]' }}
but not working correctly, is there any suggestion ?

from react-input-mask.

@dkouk Could you take a look at the master branch? It has new beforeChange property and example with your case.

from react-input-mask.

is there a way to achieve this inputmask("9{2,3}/9{2,3}").inputmask("option", {tabThrough: true}) using input mask in react?
I am looking to use a mask where i can enter 2 or 3 numbers before / if i enter 2 numbers
( e.g 12_/___)and press tab it should take me to the second portion after /.

Any help is highly appreciated.

from react-input-mask.