Obsługa klawisza Enter w Vue.js


92

Uczę się Vue.js. W moim Vue mam pole tekstowe i przycisk. Domyślnie ten przycisk przesyła formularz, gdy ktoś naciśnie klawisz Enter na klawiaturze. Kiedy ktoś pisze w polu tekstowym, chcę uchwycić każdy naciśnięty klawisz. Jeśli klucz jest symbolem „@”, chcę zrobić coś specjalnego. Jeśli naciśnięty klawisz to klawisz „Enter”, chcę też zrobić coś specjalnego. Ta ostatnia stawia mi wyzwania. Obecnie mam to Fiddle , które zawiera ten kod:

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';
    }
});

W moim przykładzie nie mogę wcisnąć klawisza „Enter” bez przesłania formularza. Spodziewałbym się jednak, że validateEmailAddressfunkcja przynajmniej uruchomi się jako pierwsza, abym mógł ją uchwycić. Ale tak się nie dzieje. Co ja robię źle?


1
Nie widzę formy w twoich skrzypcach?
Amresh Venugopal

Odpowiedzi:


55

Modyfikatory wydarzeń

Możesz odwołać się do modyfikatorów zdarzeń w vuejs, aby zapobiec przesyłaniu formularza na enterklucz.

Jest to bardzo częsta potrzeba wywołania event.preventDefault()lub event.stopPropagation()wewnętrznej obsługi zdarzeń.

Chociaż możemy to łatwo zrobić wewnątrz metod, byłoby lepiej, gdyby metody te dotyczyły wyłącznie logiki danych, a nie zajmowania się szczegółami zdarzeń DOM.

Aby rozwiązać ten problem, Vue udostępnia modyfikatory zdarzeń dla v-on. Przypomnij sobie, że modyfikatory to postfiksy dyrektywy oznaczone kropką.

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

Jak stwierdza dokumentacja, jest to cukier syntaktyczny e.preventDefault()i zatrzymuje wysyłanie niechcianego formularza po naciśnięciu klawisza Enter.

Oto działające skrzypce.

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>


Musiałem to zmienić na `@ keyup.native =" validateEmailAddress ", aby działało z moją konfiguracją w vue-cli 3
Jesse Reza Khorasanee

117

W vue 2 możesz złapać wydarzenie wejścia, v-on:keyup.entersprawdzając dokumentację:

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

Zostawiam bardzo prosty przykład:

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>

Powodzenia


8
To dało mi wskazówkę, której potrzebowałem. Z Buefy musiałem dodać natywny dla wejścia b:v-on:keyup.native.enter="onEnter"
Turbo

5
Można również użyć @ keyup.enter = "doSomething"
Dazzle

v-on: keyup.native.enter = "onEnter" jest poprawne tylko z komponentami, które nie są na przycisku.
Pushplata

Czy zawsze potrzebujemy danych wejściowych, aby wykryć naciśnięcia klawiszy? Próbuję kontrolować karuzelę Buefy za pomocą strzałek i klawisza esc (na pełnym ekranie).
Nicke Manarin

21

Zapominasz '}' przed ostatnią linią (aby zamknąć "metody {...").

Ten kod działa:

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>


Czy istnieje witryna, która zawiera listę mapowań między znakami i cyframi (np. 50 i @)? Nie mogłem go znaleźć w dokumentacji Vue
BusyProgrammer


14

Do obsługi zdarzeń wejściowych możesz użyć

  1. @keyup.enter lub
  2. @keyup.13

13 to kod wejścia. Dla zdarzenia @ key kod klucza to 50. Możesz więc użyć @keyup.50.

Na przykład:

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

Czy istnieje witryna, która zawiera listę mapowań między znakami i cyframi (np. 50 i @)? Nie mogłem go znaleźć w dokumentacji Vue.
BusyProgrammer

czy mogę używać wielu kluczy? coś w rodzaju @ keydown.1.2?
obcy
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.