[javascript] Vue.js에서 Enter 키 처리

Program / 글쓴이

Vue.js를 배우고 있습니다. 내 Vue에는 텍스트 필드와 버튼이 있습니다. 기본적으로이 단추는 누군가 키보드에서 Enter 키를 누를 때 양식을 제출합니다. 누군가 텍스트 필드에 입력 할 때 누른 각 키를 캡처하고 싶습니다. 키가 ‘@’기호라면 뭔가 특별한 걸하고 싶어요. 눌려진 키가 “Enter”키라면 나는 특별한 일도하고 싶다. 후자는 나에게 도전을주는 것입니다. 현재 다음 코드가 포함 된 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';
    }
});

내 예에서는 양식을 제출하지 않고는 “Enter”키를 누를 수 없습니다. 그러나 validateEmailAddress기능이 최소한 먼저 실행되어 캡처 할 수 있을 것으로 예상 합니다. 그러나 그것은 일어나지 않는 것 같습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

답변

이벤트 수정 자

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>

스 니펫 확장

답변

vue 2에서는 v-on:keyup.enter문서 를 확인하여 입력 이벤트를 포착 할 수 있습니다 .

https://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"></script>

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

스 니펫 확장

행운을 빕니다

답변

마지막 줄 앞에 ‘}’를 잊어 버렸습니다 ( “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>

스 니펫 확장

답변

이 이벤트는 나에게 효과적입니다.

@keyup.enter.native="onEnter".

답변

입력 이벤트 처리를 위해 다음을 사용할 수 있습니다.

  1. @keyup.enter 또는
  2. @keyup.13

13은 Enter 키 코드입니다. @ 키 이벤트의 경우 키 코드는 50입니다. 따라서 @keyup.50.

예를 들면 :

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

답변