Question

我想复制一个美国格式的电话号码并将其粘贴到我的字段中。

如果我将（456）-123-0596复制到该字段，则只有456123被复制到该字段。

但是我希望它像格式一样。

仅对使用模式的数字限制输入字段，最大长度为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)} 
  />

如何删除粘贴上的花括号和连字符并将其保存为电话号码格式？

我修改了以下代码：

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

当我调试时，我发现由于读取了maxLength1s 10（456）-123-并从此输入中删除了大括号和连字符。

如何以maxLength = 10获得这种格式？

Answer 1

我认为这种方法可以解决您的问题：

监听粘贴事件，当它发生时将maxLength属性增加到1000，然后清理输入并将其再次设置为输入值。

我已经在纯DOM中实现了它，因为我不知道react，您可以使用相同的方法在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>

要复制美国格式的电话号码

1 个答案: