Vue10 键盘事件

推荐,参考

1.Vue中常用的按键别名:

回车 => enter

删除 => delete (捕获"删除"和"退格"键)

退出 => esc

空格 => space

换行 => tab (特殊,必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

3.系统修饰键(用法特殊):ctrl、alt、shift、meta

(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

(2).配合keydown使用:正常触发事件。

4.也可以使用keyCode去指定具体的按键(不推荐)

5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名:
							回车 => enter
							删除 => delete (捕获"删除"和"退格"键)
							退出 => esc
							空格 => space
							换行 => tab (特殊,必须配合keydown去使用)
							上 => 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">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'123'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>
相关推荐
梦想CAD控件7 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions42 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平44 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1011 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
借月1 小时前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang1 小时前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0011 小时前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州1 小时前
希尔排序
前端·javascript