Vue的键盘事件

最新推荐文章于 2024-08-07 09:03:59 发布

梦魇师

最新推荐文章于 2024-08-07 09:03:59 发布

阅读量558

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_51629071/article/details/124649967

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue的键盘事件

Vue的键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 1. Vue中常用的按键别名:
				回车 => enter
				删除=>delete(捕获“朋除”和“退格”键)
				退出=>esc
				空格=>space
				换行=>tab
				上 =>up
				下 =>down
				左=>left
				右=> right
		
		2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
		
		3.系统修饰键（用法特殊）:ctrl、alt、 shift、meta
				(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
				(2).配合keydown使用:正常触发事件。
		
		4.也可以使用keyCode去指定具体的按键（不推荐)
		
		5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
        -->
        <!-- 构建一个容器 -->
		<div id="root">
			<input type="text" placeholder="按下回车提示信息" @keyup.enter="showInfo">
		</div>
	</body>
	<script>
		/* 创建vue实例 */
		var vm = new Vue({
			el:"#root",
			methods:{
				showInfo(e){
					//console.log(e.key,e.keyCode);//查看键的名字以及对应的值
					console.log(e.target.value);
				}
			}
		})
	</script>
</html>