Optional character

[cezarsmpio]

There is a way to use a optional char?

Example: <MaskInput mask="(99) 9999-9999[9]" /> or <MaskInput mask="(99) 9999-9999{9}" /> or <MaskInput mask="(99) 9999-99999?" />

Thanks!

[sanniassin]

Don't understand. How should optional char act?

[cezarsmpio]

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

[cezarsmpio]

Hi @sanniassin, any progress?

Thanks! :)

[sanniassin]

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

[cezarsmpio]

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

Thanks!

[sanniassin]

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

[deser]

Hi guys! Is there any progress on this feature?

[dapi]

I can do it for 100$ )

[deser]

Ok, please do it then)

[dapi]

Have done. Just use this configuration:

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

[deser]

Thank you!)

[eliseumds]

Guys, is this issue solved?

[cezarsmpio]

Not yet :/

[dapi]

Does not last solution fit?

[leaopedro]

Hey guys, how is this issue?

[mquandalle]

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

[deser]

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

[mquandalle]

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.

[sashashakun]

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

[alymenbr]

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.

[kaueburiti]

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.

[dkouk]

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 ?

[andredovale]

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}

[sanniassin]

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

[nagapriyanka93]

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.

[Abhishek-Palapi]

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

[fiuzagr]

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>
  );
};

[cescoferraro]

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 ? "_" : ""}

[hugosbg]

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>
  );
};

[marlosirapuan]

perfect, @hugosbg 👌 thank you.