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

最新推荐文章于 2024-02-17 08:11:07 发布

doublesXu

最新推荐文章于 2024-02-17 08:11:07 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： Vue 监听键盘事件自定义键盘事件

原文链接：https://blog.csdn.net/xiaxiangyun/article/details/80404768

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

背景：
在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。
在这里插入图片描述
方案：
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

<input @keyup.enter="function">

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

<el-input
  v-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>

doublesXu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中监听键盘事件及自定义键盘事件

背景：在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。方案：在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听...
复制链接

扫一扫