vue监听键盘事件的快捷方法【推荐】
2018-07-11 11:09
1206 查看
在我们的项目经常需要监听一些键盘事件来触发程序的执行,而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点击input弹出带搜索键盘并监听该元素的方法
- js监听键盘事件的方法—原生和jquery的区别
- 为元素绑定监听键盘上的enter键被按下事件的方法
- 使用vue.js在页面内组件监听scroll事件的方法
- vue 键盘事件监听
- Vue监听事件实现计数点击依次增加的方法
- js监听键盘事件的方法_原生和jquery的区别详解
- Android软键盘(七)键盘显示的状态下,onKeyDown方法无法监听到back事件
- 基于vue监听滚动事件实现锚点链接平滑滚动的方法
- Vue 监听列表item渲染事件方法
- vue2.x 父组件监听子组件事件并传回信息的方法
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- vue 监听键盘事件
- vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
- vue之在页面中监听键盘的Enter键来触发某个按钮事件
- vue使用element-ui的el-input监听不了回车事件的解决方法
- stage监听键盘事件被另外的swf加载后失效的解决方法。
- Android软键盘(七)键盘显示的状态下,onKeyDown方法无法监听到back事件
- java事件响应方法汇总(容器类监听、监听器类、AbstractAction、反射)
- 用Python监听鼠标和键盘事件