React-input-mask inability to paste correct phone

user_13678259 0
Viewed 1013

My input has following code

<InputMask
                        id='phone'
                        name='phone'
                        type='tel'
                        value={this.state.phone}
                        mask='+63(\999) 999-99-99'
                        maskChar='X'
                        onChange={(e: SyntheticEvent<HTMLInputElement>): void => {
                            this.setState({
                                phone: e.currentTarget.value.replace(/[^\d.+]/g, ''),
                            });
                        }}
                        onBlur={this.validateInput}
                        onPaste={(e) => this.handlePaste(e)}
                        className='form-control'
                        placeholder='Your Phone'
                    />

here +639 digits that can not be deleted. But when I try to paste phone number I get incorrect phone. For example i paste +639055943784 and get +63(963) 963-90-55 which is not desired result. My paste handler is

    handlePaste = (e) => {
    this.setState({phone: e.clipboardData.getData("Text")})
}
reactjs input javascript
2 Answers

Try that one

handlePaste = (e) => {
  const number = e.clipboardData.getData("Text");
  const formattedNumber = number.replace(/639+/i, '')
  this.setState({phone: formattedNumber})
}

There also could be edge cases when pasted value will contain another 639s, but I think you can fetch it independently

user_110228040

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).

I created a live demo for your use case, using the mask +63(9XX) XXX-XX-XX and defining custom mask rules that uses X as the user provided characters (instead of 9, because you want a digit 9 static in the mask) and associated it with a regex that only accepts a digit/number:

https://codesandbox.io/s/react-phone-mask-70fwc?file=/src/index.js:123-141

import React from "react";
import { MaskedInput } from "react-hook-mask";

const mask = "+63(9XX) XXX-XX-XX";
const maskGenerator = {
  rules: new Map([["X", /\d/]]),
  generateMask: () => mask
};

const PhoneMaskedInput = () => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <p>Phone Number:</p>
      <MaskedInput
        maskGenerator={maskGenerator}
        value={value}
        onChange={setValue}
      />
      <p>Value: {value ? "+639" + value : undefined}</p>
    </div>
  );
};

You can see a demo with several examples at:

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

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

This component wraps a default input, but the package also expose hooks to make you able to use it with any kind of component as well as the option to use dynamic masks and dynamic rules (as in the example above).

You can see more information about the package at:

https://www.npmjs.com/package/react-hook-mask

user_48506460
Related