Vue 中的按键别名（.enter）和修饰键（.ctrl）

野性酷女 2021-09-17 15:04 335阅读 0赞

参考文章：[https://blog.csdn.net/latency\_cheng/article/details/78141732][https_blog.csdn.net_latency_cheng_article_details_78141732]

1、按键别名

在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

//直接后面带.ascii码
    <input v-on:keyup.65="func(event)">  
    
    //直接后面跟.字母
    <input v-on:keyup.a="func(event)">

对于一些常用键，Vue 还提供了按键别名：

<input @keyup.enter="submit">

全部的按键别名：  
 .enter  
 .tab  
 .delete (捕获“删除”和“退格”键)  
 .esc  
 .space  
 .up  
 .down  
 .left  
 .right

2、修饰键  
除了上面提到的按键别名，还可以用如下修饰键开启鼠标或键盘事件监听，使在按键按下时发生响应。

.ctrl  
 .alt  
 .shift  
 .meta

<input @keyup.alt.67="clear">  
  
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<input @keyup.alt.67="clear">  
   
  
<input @keyup.alt="other">

[https_blog.csdn.net_latency_cheng_article_details_78141732]: https://blog.csdn.net/latency_cheng/article/details/78141732

发表评论取消回复

表情：

评论列表（有 0 条评论，335人围观）

还没有评论，来说两句吧...

相关阅读

相关 jupyter中使用ctrl+enter运行代码失效

如果以上方法都不能解决问题，可能需要进一步查看Jupyter Notebook的日志，或者考虑重新安装或更新Jupyter Notebook和相关的依赖包。在Jupyte...

╰半橙微兮°/ 2024年04月29日 01:08/ 0 赞/ 61 阅读

相关【Vue】监听Enter键

目录一、@keydown.enter 1、使用@keydown.enter指令 2、在@keydown事件处理函数中检查按下的键二、@keyup.enter.nat

迈不过友情╰/ 2024年03月03日 08:06/ 0 赞/ 91 阅读

相关 Windows键盘交换ctrl和caps按键

1、点击Win+R键 2、在输入框键入regedit，打开注册表 3、进入HKEY\_LOCAL\_MACHINE -> System -> CurrentContro

红太狼/ 2023年06月11日 15:26/ 0 赞/ 7 阅读

相关 Vue 中的按键别名（.enter）和修饰键（.ctrl）

1、按键别名在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符： <input v-on:keyup.13="

迈不过友情╰/ 2022年06月07日 00:24/ 0 赞/ 346 阅读

相关 js中操作enter键

只要在js中写入这段代码，即可触发enter键，亲测可用 document.onkeydown=function(event){ v

落日映苍穹つ/ 2022年05月29日 00:18/ 0 赞/ 243 阅读

相关 vue中的重定向和别名

重定向：重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，重定向也是通过 routes 配置来完成，下面例子是从 "\" 重定向

﹏ヽ暗。殇╰゛Y/ 2022年05月18日 23:22/ 0 赞/ 239 阅读

相关留言板(用快捷键enter/ctrl+enter发送)

一、js实现留言板; 1.css布局：一个div,显示留言内容；两个文本框，第一个输入留言者姓名,第二个输入留言内容；三个发送按钮，第一个为点击发送，第二个为快

谁借莪１个温暖的怀抱￠/ 2022年03月17日 14:44/ 0 赞/ 197 阅读

相关 EOF 和 Enter键在cmd中的实现

EOF即：end of file.代表文档的结束，在cmd中若是要手动结束，则换行输入ctrl+Z即可。此外要想通过Enter键结束循环或程序，可通过 ‘\\n’ 和 1

Bertha 。/ 2022年03月14日 12:12/ 0 赞/ 515 阅读

相关【记录】keyCode值以及VUE中按键别名

keyCode值及对应按键 <table> <thead> <tr> <th style="width:199px;text-align:center;ve

你的名字/ 2022年03月01日 08:06/ 0 赞/ 374 阅读

相关 Vue 中的按键别名（.enter）和修饰键（.ctrl）

参考文章：[https://blog.csdn.net/latency\_cheng/article/details/78141732][https_blog.csdn.net

野性酷女/ 2021年09月17日 15:04/ 0 赞/ 336 阅读