Want to copy US format phone number

Question

I want to copy a US format phone number and paste it to my field .

If I copy (456)-123-0596 to the field only 456123 is copied to the field.

But I want it to be like the format.

The input field is restricted only for numbers using pattern and maximum length is 10.

onCheckInput(e) {
  const onlyNums = e.target.value.replace(/[^0-9]/g, '');

   if (onlyNums.length < 10) {
    e.target.value = onlyNums;
   } else if (onlyNums.length === 10) {
    const number = onlyNums.replace(/(\d{3})(\d{3})(\d{4})/, '($1) -$2-$3');
    e.target.value = number;
    }
  }

formatPhoneNumber(number) {
 if (number && number != 0) {
  number = number.replace(/-/g, '');
  number = number.replace('(', '');
  number = number.replace(') ', '');
  number = number.replace(')', '');
  return '(' + number.substr(0, 3) + ')-' + number.substr(3, 3) + '-' + number.substr(6, 4);
 }
  return '';
 }


<Field name="HomePhone" 
  onInput={this.onCheckInput} maxLength="10"

  pattern="\d*" component="input" type="text" 

  placeholder="HomePhone" 

  title={' Home Phone: ' + this.formatPhoneNumber(patientInfo.HomePhone)} 
  />

How can I remove the braces and hyphens on Paste and save them in the Phone number format?

I've modified the code as below:

onCheckInput(e) {
        const onlyNums = e.target.value.replace(/[^0-9]/g, '');
         if (onlyNums != e.target.value.replace(/[^\d\.]/g,"")) 
            {onlyNums.replace(/[^\d\.]/g,"");
            } 
        if (onlyNums.length < 10) {
            e.target.value = onlyNums;
        } else if (onlyNums.length === 10) {
            const number = onlyNums.replace(/(\d{3})(\d{3})(\d{4})/, '($1) -$2-$3');
            e.target.value = number;
        }
    }

When I debugged I found that Since maxLength1s 10 (456)-123- is read and removed braces and hyphens from this input.

How can I get this format with maxLength=10?

Possible duplicate of [Format a phone number as a user types using pure JavaScript](https://stackoverflow.com/questions/30058927/format-a-phone-number-as-a-user-types-using-pure-javascript) — Amir-Mousavi, May 20 '19 at 07:33

Pablo · Answer 1 · 2019-05-20T13:11:49.663

I think this approach can solve your problem:

Listen paste event, when it happens increment maxLength property to 1000, then clean the input and set it again to the input value.

I have implemented it in plain DOM because I don't know react, you can use the same approach to implement it in React

const input = document.querySelector('#HomePhone');

input.addEventListener('paste', (event) => {
    // Imcrement maxLengt temporally so user can paste input with ( -
 input.maxLength=1000
    setTimeout(()=>{ 
      // clean input: only get numbers
     const result = input.value.replace(/[^\d]/g,'')
      // set the clean input into input value
      input.value=result
      // reset maxLength to 10
     input.maxLength=10
    }, 1);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input name="HomePhone" id="HomePhone" maxLength="10"  type="text"  pattern="\d*" />
</body>
</html>

Want to copy US format phone number

1 Answers1