正则表达式 phone 掩码

Regex phone masking

我正在尝试编写 phone 输入屏蔽函数。这是:

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

有效,但有一个问题。当我按下退格键时,我将 phone 数字擦除为 +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,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 />