防止删除或退格键触发@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>

父容器.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"

您可以preventDefault在您的handleInput函数上执行此操作以防止输入值被删除。因此，不要传递 ，而是从输入$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