JavaScript

超轻量级php框架startmvc

vue监听键盘事件的快捷方法【推荐】

更新时间:2020-07-16 11:36:01 作者:startmvc
在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加

在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符:


<input v-on:keyup.13="submit">

对于一些常用键,还提供了按键别名:


<input @keyup.enter="submit"> <!-- 缩写形式 -->

全部的按键别名:

 .enter  .tab  .delete (捕获“删除”和“退格”键)  .esc  .space  .up  .down  .left  .right

修饰键:

 .ctrl  .alt  .shift  .meta


<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

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


<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

对于elementUI的input,我们需要在后面加上.native, 因为elementUI对input进行了封装,原生的事件不起作用。


<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

总结

以上所述是小编给大家介绍的vue监听键盘事件的快捷方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

vue监听键盘事件 vue 监听键盘