2021-08-09 v-on设置键盘抬起事件(附:常见键盘事件和所有键位值)

格式

v-on:keyup.enter=“fn”
*同理可以把enter换成其他键盘键位,
同时,可以绑定其他事件,不一定要键盘抬起(keyup)

代码

html

<div id="app">
	<input type="text" v-model="msg" v-on:keyup.enter="fn"/>
</div>

js

var app = new Vue({
	el: '#app',
	data: {
		msg:''
	},
	methods:{
		fn(){
			alert(this.msg);//文本框输入内容后回车,弹出框就弹出输入内容
		}
	}
})

常见键盘事件：

1.keydown

在键盘上按下某个键时触发。(按住某个键不断触发该事件)

2,keypress

键盘键按下并释放时触发。(按住某个键不断触发该事件)

3.keyup

释放某个键盘键时触发。(松开键盘时仅触发一次该事件)

所有键位的键码值

1.控制键的键码

2.数字和字母键的键码

3.数字键盘的键码