vue.js - 防止删除或退格键触发@input 事件

Question

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

基础输入字段.vue

<template>
  <div>
    ...
    <input
      ...
        :value="value"
        @keyup.delete="$emit('delete-or-backspace-key-pressed')"
        @input="$emit('input', $event.target.value)"
       ...
    />
     ...
  </div>
</template>

ParentContainer.vue

<BaseInputField
  ...
    @input="handleInput"
    @delete-or-backspace-key-pressed="handleDeletion"
  ...
/>

问题是按下 del 或 backspace 按钮也会触发 @input 事件，这会干扰我的实现。

如果不使用 Keycodes 就可以防止这种行为，我将不胜感激，因为根据 Vue 文档，它们已被弃用并且可能不适用于较新的浏览器。

Answer 1

可以使用event.key代替，但是需要使用@keydown事件代替@input

event.key 值将是 "Backspace" 或 "Delete" 如果您分别按 backspace/del。

并且您可以对handleInput 函数执行preventDefault 以防止输入值被删除。因此，不是传递 $event.target.value，而是传递来自输入的整个 $event 对象

@keydown="$emit('input', $event)"

在你的handleInput函数上:

handleInput(e) {
      if (e.key === "Backspace" || e.key === "Delete") {
          return e.preventDefault(); // Don't do anything to the input value
      }
      const value = e.target.value;
      // do something with value
}

演示:https://codesandbox.io/s/fast-snowflake-xpwqm?file=/src/App.vue