防止删除或退格键触发@input 事件

Question

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

BaseInputField.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

只需将BaseInputField.vue 更改为以下内容：

<template>
  <input
    :value="value"
    @keyup.delete="triggerDBKey"
    @input="triggerInput"
    @paste="triggerPaste"
  />
</template>

<script>
export default {
  name: 'BaseInputField',
  props: {
    value: {type: String, default: ''}
  },
  data() {
    return {
      originalValue: this.value
    }
  },
  methods: {
    triggerInput(e) {
      if (this.originalValue.length > 0 && this.originalValue.length > e.target.value.length) return
      this.originalValue = e.target.value
      this.$emit('input', e.target.value)
    },
    triggerDBKey(e) {
      if (e.target.value === '') {
        this.originalValue = ''
      }
      this.$emit('delete-or-backspace-key-pressed')
    },
    triggerPaste(e) {
      this.$emit('paste')
    }
  }
}
</script>

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

这是我的codesandbox

Answer 2

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

event.key 的值将是 "Backspace" 或 "Delete" 如果您分别按退格/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