添加正则表达式后无法从输入中删除文本

Question

我有这个javascript代码:

document.querySelector('div[data-field-name="CNPJ"] input').addEventListener('keydown', (inheritance) => {
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;
})

我遇到的问题是，当输入的值达到最大长度(我在代码中规定)时，我无法删除文本。

我不知道是什么原因导致这个问题。

Answer 1

当您达到最大长度时，您正在阻止这一行的默认输入行为。删除它，并在HTML代码中添加一个maxlength检查。

if (value.length >= 18) {
inheritance.preventDefault()
inheritance.stopPropagation()
return
}

我不知道为什么需要这一行，因为你可以在HTML中做类似的事情:

<input maxlength="18"></input>

你能详细说明为什么maxlength必须在JavaScript中完成?

或者你可以在逻辑中添加退格或类似的键检查:

if (
value.length >= 18
&& inheritance.key !== "Backspace"
) {
inheritance.preventDefault()
inheritance.stopPropagation()
return
}

我不建议亲自检测特定的键，因为HTML会考虑比单个键检查更多的边缘情况。

查看MDN文档的输入模式。

Answer 2

前面的实现没有办法，因为inheritance.preventDefault()使函数在长度大于或等于18时不产生输入

更好的方法是去掉if statement，然后将maxlength="18"属性添加到输入元素中。

参见演示:

因为if语句

document.querySelector('div[data-field-name="CNPJ"] input').addEventListener('keydown', (e) => {
let value = e.target.value;
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")
e.target.value = value;
})

<div data-field-name="CNPJ">
<input type="text" maxlength="18" />
</div>