삭제 또는 백스페이스 키가 @input 이벤트를 트리거하지 않도록 합니다.

삭제 또는 백스페이스 키가 @input 이벤트를 트리거하지 않도록 합니다.

입력 컴포넌트(@input and@keyup.delete)에 2개의 이벤트청취자가 있습니다.@input listener를 사용하여 키를 검출하고 그에 따라 키를 사용하고 있습니다.또한 사용자가 delete 버튼이나 backspace 버튼을 탭하는 것도 검출하여 핀 필드의 인덱스를 변경할 수 있도록 하고 싶습니다.

Base Input Field(베이스 입력 필드)표시하다

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

Parent Container.표시하다

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

문제는 이 키를 누르면서del또는backspace버튼도 트리거합니다.@input그리고 그것은 나의 실행을 방해하고 있어요.

다음을 사용하지 않고 이러한 행동을 방지할 수 있도록 도와주시면 감사하겠습니다.KeycodesVue 매뉴얼에 따르면 이러한 브라우저는 권장되지 않으며 새로운 브라우저에서는 작동하지 않을 수 있습니다.

사용할 수 있습니다.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

변경만 하면 됩니다.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>

편집 전후의 콘텐츠 길이를 판단하여 입력 이벤트가 트리거되지 않도록 합니다.

여기 제 코드 앤 박스입니다.

언급URL : https://stackoverflow.com/questions/63643079/prevent-delete-or-backspace-key-from-triggering-input-event