删除值时输入掩码不起作用

Question

我构建了一个函数来在键入时屏蔽输入，它工作正常，但在删除输入中的值时，屏蔽行为异常。

function App() {
const [phone, setPhone] = React.useState('')

  function maskPhone({ target: { value } }) {
  console.log(value)
  const toMatch = value.replace(/\D/g, '')
    const regex = /(\d{0,2})(\d{0,1})(\d{0,4})(\d{0,4})/
  const [,ddd, prefix, first, second] = toMatch.match(regex)
  setPhone(`(${ddd}) ${prefix} ${first} ${second}`)
 }
  
  return  <div>
      phone: <input type='text' onChange={maskPhone} value={phone} />
  </div>
}

ReactDOM.render(<App/>, document.querySelector('#root'))

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

您需要使正则表达式的几乎所有部分都可选 (?:\s*(\d{n,m}))? 种模式，然后检查组是否匹配，并动态构建替换模式。由于这些括号，带括号的第一部分也需要调整。

这是一个可行的解决方案：

function App() {
const [phone, setPhone] = React.useState('')

function maskPhone({ target: { value } }) {
    console.log(value)
    var reg  = /^(\d{1,2})(?:\s*(\d)(?:\s*(\d{1,4})(?:\s*(\d{1,4}))?)?)?$/
    setPhone(value.replace(/\D/g,'').replace(reg, (_,w,x,y,z) =>  
       ( w.length>0 ? `(${w}` : "") + ( x ? `) ${x}` : "") + ( y ? ` ${y}` : "") + ( z ? ` ${z}` : "") ))
    }
  
  return  <div>
      phone: <input type='text' onChange={maskPhone} value={phone} />
  </div>
}

ReactDOM.render(<App/>, document.querySelector('#root'))

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

删除值时输入掩码不起作用

Input mask doesn't work when value is deleted

javascript

regex

masking

maskedinput

reactjs