Vue中监听键盘事件及自定义键盘事件

在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。

方案：
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

<input @keyup.enter="function">

另外，Vue中还支持组合写法：
注意
但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：

<el-inputv-model="inputName"placeholder="搜索你的文件"@keyup.enter.native="searchFile(params)">
</el-input>

如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。

另外：

 //自定义键盘事件Vue.directive('on').keyCodes.ctrl=17;

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><script src="js/vue.js"></script><script>//自定义键盘事件Vue.directive('on').keyCodes.ctrl=17;  window.onload=function(){var vm=new Vue({el:'#wrap',data:{ },methods:{ show:function(e){// console.log(111);// console.log(e.keyCode); //按钮的code值，ASCII码//判断是否按下回车/*if(e.keyCode==13){console.log('您按下回车');}*/console.log(111);}  }});};</script>
</head>
<body><div id="wrap">    <!-- 用户名：<input type="text" @keydown="show($event)"> --><!-- 简化按键的判断 --><!-- 用户名：<input type="text" @keydown.13="show($event)"> --><!-- 用户名：<input type="text" @keydown.enter="show($event)"> --><!-- 用户名：<input type="text" @keydown.delete="show($event)"> --><!-- 用户名：<input type="text" @keydown.x="show($event)"> -->用户名：<input type="text" @keydown.ctrl="show($event)"></div>
</body>
</html>

Vue中监听键盘事件及自定义键盘事件相关推荐

Vue中监听键盘事件
Vue中监听键盘事件在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作.在原生js或者jQuery中,我们需要判断e.keyCode的值来获取 ...
如何在ArcMap中监听键盘鼠标事件
昨天有个朋友想要实现一个功能,就是在ArcMap中编辑数据的时候,能够通过快捷键自动设置预定义的属性,比如,选中若干要素,按A键,就自动填充属性,按B键,则又自动填充另外的属性字段. 单就这个功能而言 ...
[vue] vue如何监听键盘事件？
[vue] vue如何监听键盘事件? 那要看你怎么监听了, 比如 @keyup.enter, 或者直接全局监听个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
Vue中失去焦点时所触发的事件
Vue中失去焦点时所触发的事件 1-html.失去焦点 <input type="text" onBlur="txtblur()"> <scr ...
swt 键盘事件ctrl+c_VB键盘事件详解
"本节课程一起学习VB中的键盘事件."键盘事件的作用:获得键盘输入信息,只有获得焦点的对象才能接受键盘事件.键盘事件有三种:KeyPress.KeyDown.KeyUpKeyPre ...
DOM事件里面的键盘事件
在JS里面有很多很多的事件,我们以后将会接触到它们,而它们在我们的JS代码里面是必不可少的,而现在我要讲的就是DOM事件里面的键盘事件. 相信很多小伙伴都知道,平时有一些选项不用按确定按钮,直接一个回 ...
vue 回车查询按钮_vue之在页面中监听键盘的Enter键来触发某个按钮事件
项目中得需求:给页面某个按钮绑定Enter键,但是按钮不在form中,直接给按钮绑定后此按钮只有获取了焦点按键才会触发,显然,一直保持按钮获取焦点是不现实得.所以通过查询等,结合项目需求,完成了下面得 ...
如何在Revit中监听键盘事件
欢迎加入BIM行业开发交流1群群号:711844216(满),二群群号:1016453207 背景小伙伴们在做revit二次开发的时候,可能会需要在自己做的插件运行时,去监听某个按键然后做出相应的 ...
android 键盘弹出监听,奇技淫巧之-Android监听键盘弹出与隐藏事件
CaptainAndroid.png 相信看到这个标题,大家都会潜意识觉得:Activity中没有可以复写的方法么?或者说,没有什么listener可以让我们使用么? 抱歉,真的没有,我们潜意识都是以 ...

Vue中监听键盘事件及自定义键盘事件

Vue中监听键盘事件及自定义键盘事件相关推荐

最新文章

热门文章