(精华2020年5月4日更新) vue教程篇键盘事件

最新推荐文章于 2022-08-14 21:31:24 发布

2b勿扰

最新推荐文章于 2022-08-14 21:31:24 发布

阅读量1.6w

点赞数 1

分类专栏： (持续更新)vue基础篇文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41181778/article/details/105912408

版权

(持续更新)vue基础篇专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>键盘事件</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		/**
		 * 自定义键位别名
		 */
		Vue.config.keyCodes={
			a:65,
			f1:112
		}

		window.onload=function(){
			let vm=new Vue({
				el:'#app',
				methods:{ 
					show(e){
						console.log(e.keyCode);
						if(e.keyCode==13){
							console.log('您按了回车');
						}
					},
					print(){
						console.log('向上');
						// console.log('您按了方向键上');
						console.log('11111');
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="app">
		<!-- 键盘事件：@keydown、@keypress、@keyup -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		
		<!-- 简化按键的判断 -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		用户名：<input type="text" @keydown.13="print">
		用户名：<input type="text" @keydown.enter="print">
		用户名：<input type="text" @keydown.up="print">
		<!-- 用户名：<input type="text" @keydown.f1="print"> -->
		
		<!-- 事件修饰符 -->
		<button @click.once="print">只触发一次</button>
	</div>
</body>
</html>