Vue.js 防止delete或backspace键触发@input事件

我在一个输入组件上有两个事件侦听器（@input和@keyup.delete）。我使用@input listener来检测键并相应地处理它们的使用，同时我还想检测用户何时点击delete或backspace按钮，以便我可以更改pin字段中的索引

BaseInputField.vue

...
...

ParentContainer.vue

问题是按下

del

或

backspace

按钮也会触发

@input

事件，这会干扰我的实现

---

如果能在不使用

Keycodes

的情况下帮助我防止这种行为，我将不胜感激，因为根据Vue文档，它们已被弃用，可能无法与较新的浏览器一起使用。

只需将

BaseInputField.Vue

更改为以下内容：

导出默认值{
名称：“BaseInputField”，
道具：{
值：{type:String，默认值：“”
},
数据（）{
返回{
原始值：this.value
}
},
方法：{
触发器输入（e）{
if（this.originalValue.length>0&&this.originalValue.length>e.target.value.length）返回
this.originalValue=e.target.value
此.$emit（'input'，例如target.value）
},
触发键（e）{
如果（e.target.value==''）{
this.originalValue=“”
}
此.$emit（'delete-or-backspace-key-pressed'）
},
触发器粘贴（e）{
此.$emit（'粘贴'）
}
}
}

通过判断编辑前后的内容长度，防止触发输入事件

---

这是我的

您可以使用

event.key

代替，但您需要使用

@keydown

event代替

@input

事件。键

值将是

“Backspace”

或

“Delete”

，如果分别按Backspace/del

您可以在

handleInput

功能上执行

preventDefault

，以防止输入值删除。因此，不要传递

$event.target.value

，而是从输入中传递整个

$event

对象

@keydown=“$emit（'input'，$event）”

在您的

handleInput

功能上：

handleInput（e）{
如果（e.key==“Backspace”| e.key==“Delete”）{
返回e.preventDefault（）；//不要对输入值执行任何操作
}
常量值=e.target.value；
//做有价值的事
}

---

演示：

表示他们正在放弃对使用

keyCode

数字作为

v-on

修饰符和

Vue.config.keyCodes

的支持。别名似乎仍然受到支持。谢谢@tony19提供的信息。很有名，谢谢你的回复+答案是1。这对我的解决方案没有帮助，但很有启发性。谢谢你的回复+答案是1。我现在知道

e.key

并没有被弃用。我担心除了

keyCode

之外别无选择。