Question

我在输入组件上有两个事件侦听器（@input和@ keyup.delete）。我正在使用@input侦听器来检测键并相应地处理它们的用法，同时我还想检测用户何时单击Delete或Backspace按钮，以便可以在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事件，这会干扰我的实现。

根据Vue文档的说明，不使用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

如果分别按下Backspace / del键，则

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

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

BaseInputField.vue

ParentContainer.vue

2 个答案: