Mobile number masking in React

Question

Hi need to masked mobile number when user enter the mobile number in input box it should be 021 121 4544 in this format. means there should be 021{auto space}121{auto space}4544 how can i build in react this functionality?

class NumberCheck extends Component {
    state = {
        disabled: true,
        errorBlock: 'none',
        mobileNumber: '',
        error: ''
    };

handleOnChange = (event) => {
    let disabled = event.target.value ? disabled = false : disabled = true;
    this.setState({
        disabled: disabled,
        mobileNumber: event.target.value
    })
}

submit = (e) => {
    e.preventDefault();
    if (this.state.mobileNumber.match(/^02[0-9]{6,11}$/)) {
        this.setState({
            errorBlock: 'none'
        })
        const payload = {
            msisdn: this.state.mobileNumber
        }
        this.props.checkNumber(payload);
    } else {
        this.setState({
            error: ' Please enter valid mobile no',
            errorBlock: 'block'
        })

    }

}

render() {
    const { isLoading, isError } = this.props;
    if (isLoading) {
        return <Spinner />
    }
    if (isError) {
        return <ChangePlanError />
    }
    return (
        <form className="spring spring--sm">
            <p className="heading heading--3 heading--center no-gutter--top">{"Already with Vodafone?"}</p>
            <p className="heading--center">{"Sign in using a TXT code to check if you are eligible to upgrade or change your plan"}</p>
            <div className="alert alert--light alert--warning alert--arrow validation__warning" style={{ display: this.state.errorBlock }}>
                <div className="caption">
                    < div className="caption__media caption__media--top alert__media" >
                        <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                        </svg>
                    </div>
                    <div className="caption__text caption__text--top alert__text">
                        {this.state.error}
                    </div>
                </div>
            </div>
            <input
                type="text"
                onChange={this.handleOnChange}
                className="form__input form__input--dark"
                name="mobileno"
                placeholder="021 1234567"
                mask="000 000 0000" />
            <div id="submit" className="form__row form__row--medium gutter--bottom">
                <input
                    type="submit"
                    className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`}
                    value=" Continue"
                    onClick={this.submit} />
            </div>
        </form >
    );
}

}

Answer 1

I created a package that exposes an input component that displays a masked value according to the mask it receives.

The mask will change keeping the cursor at the correct position (even if you change part of the value in the middle of the input, paste some characters, or delete a part of it, and even if the mask changes).

You can see a Demo with examples at:

https://lucasbasquerotto.github.io/react-masked-input

(The first example has an input with a similar mask asked in this SO question, you only need to change the mask string to 999 999 9999).

To install the package: npm i react-hook-mask

Use it:

import { MaskedInput, createDefaultMaskGenerator } from 'react-hook-mask';

const maskGenerator = createDefaultMaskGenerator('999 999 9999');

const MobileNumberMaskedInput = () => {
    const [value, setValue] = React.useState('');

    return (
        <MaskedInput
            maskGenerator={maskGenerator}
            value={value}
            onChange={setValue}
        />
    );
};

This component wraps a default input, but the package also expose hooks to make you able to use it with any kind of component.

The function createDefaultMaskGenerator is convenient when all you need is to use a mask defined by a static string. You can also use dynamic masks that change according to the value, and even transforming the value (for example, making the characters uppercase).

The hook useMask is a generic hook that can be used with any component (even native components) as long as the component has a way to retrieve and to modify the cursor position.

The hook useRefMask wraps useMask and provides an easy way to forward a ref to the component, as well as using the ref element in the functions that manage the cursor position (Example).

The (more specific) hook useWebMask wraps useRefMask and can be used with any custom react-dom component that wraps an input and whose ref is an HTMLInputElement, without having to define a getter and a setter for the cursor position, and with an onChange function that sets the value received from the event object (Example).

Answer 2

The below function will mask the phone number , the basic operation to perform such functions is slicing/sub string and string concatenation

maskingFunction= (phoneNumber)=>{
  let subNum = phoneNumber.toString().substring(0,3)
   subNum = subNum + "XXXXXXXXXXXX"
   return subNum
}

Answer 3

You can create a new string with previous string and replace it in the input.

const number = '0211214544';
const num = `${number.substring(0, 3)} ${number.substring(3, 6)} ${number.substring(6, number.length)}`;

console.log(num);

Created a working example in React.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    };
  }

  change = (event) => {
    let val = event.target.value;
    val = val.replace(/ /gm, '');
    console.log(val);

    let num = `${val.substring(0, 3)} ${val.substring(3, 6)} ${val.substring(6, val.length)}`;

    num = num.trim();

    this.setState({
      name: num
    });
  };

  render() {
    return (
      <div className="App">
        <input
          ref="inputName"
          value={this.state.name}
          onChange={this.change}
        />
      </div>
    );
  }
}

export default App;