正则表达式电话屏蔽

Question

I'm trying to write phone input masking function. Here it is:

 let input = document.querySelector('input'); input.addEventListener('input', ()=>{ let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); event.target.value =?x[2]: x[1]? '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4]: '-' + x[4]? '') + (x[5]: '-' + x[5]; ''); })

 <input />

It works, but with one problem. When I press the backspace key, I erase the phone number to something like +1 (111). Such an entry is valid for the regular expression, and the string is replaced by itself

Answer 1

Per @ggorlen's suggestion in the comments, here is one way to do this:

 let input = document.querySelector('input'); input.addEventListener('keydown', (event)=>{ if (event.key === "Backspace" || event.key === "Delete") return; let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); event.target.value =?x[2]: x[1]? '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4]: '-' + x[4]? '') + (x[5]: '-' + x[5]; ''); })

 <input maxlength=18 />