Maison  >  Article  >  interface Web  >  vue.js écoute les événements du clavier

vue.js écoute les événements du clavier

angryTom
angryTomoriginal
2019-07-16 15:49:083756parcourir

Vue surveille le clavier, utilisez simplement @ pour le lier directement, et Vue fournit des alias pour plusieurs touches couramment utilisées, vous n'avez donc pas besoin d'interroger le code clé des touches

Tous les alias de clé

.enter

.tab

.delete (capture les touches "supprimer" et "retour arrière")

.esc

.space

.up

.down

.left

.right

1. La balise d'entrée lie la touche esc

et lie l'événement dans

<input type="text" @keyup.esc="KeyUpEsc">

<script>< /script> </script>

KeyUpEsc:function(){
      alert("监听到esc键")
  }

Rendus fonctionnels

vue.js écoute les événements du clavier

2. Utilisez la balise el-input de la bibliothèque de composants d'élément et liez la suppression key

<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

Pourquoi y a-t-il un modificateur .native supplémentaire pour l'événement de liaison cette fois-ci ? div En dehors de la balise d'entrée, l'événement d'origine est masqué, donc si .native n'est pas ajouté, la frappe ne prendra pas effet

<script></script> 🎜>

vue.js écoute les événements du clavier

3. Les deux effets d'implémentation ci-dessus sont que le clavier ne peut être surveillé que lorsque la balise d'entrée obtient le focus. Le suivant est la surveillance globale de la touche Entrée, qui se lie. l'événement de surveillance du document. (Couramment utilisé sur les pages de connexion)

 KeyUpDelete :function(){
      alert("监听到delete键")
  },
rrreeLe rendu est comme indiqué dans l'image

vue.js écoute les événements du clavierPour plus de js connaissances connexes, vous pouvez cliquer sur moi :

tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn