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

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> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">KeyUpEsc:function(){ alert(&quot;监听到esc键&quot;) }</pre><div class="contentsignin">Copier après la connexion</div></div><p> Rendus fonctionnels<br/></p><p style="text-align: center;"><img src="https://img.php.cn/upload/image/398/124/610/1563262876128883.png" title="1563262876128883.png" alt="vue.js écoute les événements du clavier"/></p><p><strong> 2. Utilisez la balise el-input de la bibliothèque de composants d'élément et liez la suppression key</strong> </p><p><template></template> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">&lt;el-input v-model=&quot;input&quot; placeholder=&quot;请输入内容&quot; @keyup.delete.native=&quot;KeyUpDelete&quot;&gt;&lt;/el-input&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>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 </p><p><script></script> 🎜>

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

Pour 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!