正则表达式电话屏蔽

如何解决正则表达式电话屏蔽

我正在尝试编写电话输入屏蔽功能。在这里：

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,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 />

它有效，但是有一个问题。当我按退格键时，我会将电话号码擦除为+1（111）。这样的条目对正则表达式有效，并且字符串被其自身替换

解决方法

按照@ggorlen在评论中的建议，这是一种实现方法：

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,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 />