Vue.js에서 키 입력 처리

Vue.js에서 키 입력 처리

텍스트 필드와 버튼이 있습니다.
기본적으로, 이 단추는 다른 사용자가 키보드의 키를 누르면 양식을 제출합니다.
누군가가 텍스트 필드를 입력할 때 각 키를 누른 상태로 캡처합니다.키가 다음과 같은 경우@상징, 나는 뭔가 특별한 것을 하고 싶습니다.

누른 키가 키라면 저도 뭔가 특별한 일을 하고 싶습니다.저에게 도전을 주는 것은 후자입니다.현재 제가 가지고 있는 Fiddle 코드는 다음과 같습니다.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

예를 들어, 양식을 제출하지 않으면 키를 누를 수 없을 것 같습니다.하지만, 저는 기대합니다.validateEmailAddress내가 잡을 수 있도록 최소한 먼저 발사하는 기능을 합니다.하지만, 그런 일은 일어나지 않는 것 같습니다.
내가 뭘 잘못하고 있는 거지?

Vue 2에서 엔터 이벤트를 잡을 수 있습니다.v-on:keyup.enter문서를 확인합니다.

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

아주 간단한 예를 하나 남깁니다.

var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

이벤트 수정자

vuejs의 이벤트 수정자를 참조하여 폼 제출을 방지할 수 있습니다.enter열쇠.

전화하는 것은 매우 일반적인 필요입니다.event.preventDefault()아니면event.stopPropagation()내부 이벤트 핸들러가 있습니다.

방법 내부에서 이를 쉽게 수행할 수 있지만, 방법이 DOM 이벤트 세부 정보를 처리하는 것보다 순수하게 데이터 논리에 관한 것이라면 더 나을 것입니다.

이 문제를 해결하기 위해 Vue는 다음에 대한 이벤트 수정자를 제공합니다.v-on. 수식어는 점으로 표시되는 지시 후첨부호임을 기억합니다.

<form v-on:submit.prevent="<method>">
  ...
</form>

문서에 명시되어 있듯이, 이것은 의 합성 설탕입니다.e.preventDefault()그리고 Enter 키를 누르면 원하지 않는 양식 제출을 중지합니다.

여기 작동하는 바이올린이 있습니다.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
            this.log += '\n\nPosting';
    },
    noop () {
      // do nothing ?
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
  <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>  
</form>
</div>

입력 이벤트 처리의 경우 사용할 수 있습니다.

1. @keyup.enter아니면
2. @keyup.13

13은 입력의 키코드입니다.@ key 이벤트의 경우 키코드는 50입니다.사용하시면 됩니다.@keyup.50.

예를 들어,

<input @keyup.50="atPress()" />

이 이벤트는 저에게 효과가 있습니다.

@keyup.enter.native="onEnter".

마지막 줄 앞에 '}을(를) 잊어버립니다("methods {...").

이 코드는 다음과 같이 작동합니다.

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="myApp" style="padding:2rem; background-color:#fff;">

  <input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>
</div>

이벤트를 다음과 같은 하위 구성 요소로 전달할 수도 있습니다.

<CustomComponent
    @keyup.enter="handleKeyUp"
/>

...

<template>
    <div>
        <input
            type="text"
            v-on="$listeners"
        >
    </div>
</template>

<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('listeners', this.$listeners)
    },
}
</script>

패스스루 구성요소가 있고 청취자가 특정 구성요소로 이동하기를 원할 경우 이 작업이 잘 수행됩니다.

뷰 3

Vue 3에서 이벤트 입력을 들으려면 이 코드가 작동합니다.

<input @keyup.enter="onPressEnter" />

또는 키가 해제될 때가 아니라 키를 누르면 이벤트가 실행되기를 원할 수도 있습니다.

<input @keydown.enter="onPressEnter" />

메서드에 대한 닫힘 컬괄호가 없습니다.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
  }//add this closing bracket and everything is fine
});

이렇게 Vue3에서 Composition API로 작성하시면 됩니다.

<script setup>
function callOnEnter() {
  console.log("Enter key pressed");
}
</script>

<template>
  <input type="text" @keyup.enter="callOnEnter" />
</template>

자세한 내용은 https://vuejs.org/guide/essentials/event-handling.html#key-modifiers 에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/42951967/handling-enter-key-in-vue-js