输入框添加CNPJ正则格式化规则后达到最大长度无法删除文本如何解决

问题原因 #

你绑定的是keydown事件，当输入框内容长度达到18后，你直接调用了preventDefault()阻止了所有按键的默认行为，这其中也包含了退格（Backspace）、删除（Delete）这类编辑按键的默认操作，所以自然无法删除已输入的内容。

修复方案 #

你只需要在触发长度限制逻辑前，先判断当前按下的是不是允许的编辑/导航类按键，排除这些按键后再执行阻止输入的逻辑即可，修改后的代码参考：

document.querySelector('div[data-field-name="CNPJ"] input').addEventListener('keydown', (inheritance) => {
    // 放行常用编辑、导航按键，不做长度拦截
    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    if (allowedKeys.includes(inheritance.key)) {
        return;
    }
    let value = inheritance.target.value;
    console.log(value.length)
    if (value.length >= 18) {
        inheritance.preventDefault()
        inheritance.stopPropagation()
        return
    }
    value = value.replace(/\D/g, "")
    value = value.replace(/^(\d{2})(\d)/, "$1.$2")
    value = value.replace(/^(\d{2}).(\d{3})(\d)/, "$1.$2.$3")
    value = value.replace(/.(\d{3})(\d)/, ".$1/$2")
    value = value.replace(/(\d{4})(\d)/, "$1-$2")
    inheritance.target.value = value;
})

如果需要进一步优化兼容性，还可以额外放行Ctrl/Cmd组合操作（比如全选、复制、粘贴等），避免常规编辑操作被误拦截。

内容的提问来源于stack exchange，提问作者Matheus Souza Silva