shangrila-xiu

112
文章
101
分类
33
标签

键盘事件

键盘事件

从字面意思就可以知道是关于键盘时间的一些使用，那么请看更多

获得键盘的码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="keyb">
			<input type="text" placeholder="请输入" @keydown="show($event)" />
			
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#keyb',
						methods:{
							show:function(event){
								alert(event.keyCode);
							}
						},
					});
				};
			</script>	
	</body>
</html>
从上面的代码，我们可以查看任何一个键盘的键码是多少，如enter键的键码是13，当然如果直接记住了所有键盘的键码就最好了。

我们首先需要知道的是，实现键盘事件，如回车的简单的事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="keyb">
			<input type="text" placeholder="请输入" @keydown="show($event)" />
			
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#keyb',
						methods:{
							show:function(event){
									if(event.keyCode==13){
										alert("你按回车了~");
									}
							}
						},
					});
				};
			</script>	
	</body>
</html>
当我们点击回车键（enter)就会弹出框：你按回车了~，我自己也觉得这个挺奇妙的

接下来，我们看看另外一种实现的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="keyb">
			<input type="text" placeholder="请输入" @keydown.13="show()" />
			
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#keyb',
						methods:{
							show:function(){
									
										alert("你按回车了~");
									
							}
						},
					});
				};
			</script>	
	</body>
</html>
这个说明，我们在使用的时候可以直接使用@keydown.13=”show()” 来实现回车的事件

当然了，键盘的事件不止上面讲的,下面这个也可以实现回车！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="keyb">
			<input type="text" placeholder="请输入" @keydown.enter="show()" />
			
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#keyb',
						methods:{
							show:function(){
									
										alert("你按回车了~");
									
							}
						},
					});
				};
			</script>	
	</body>
</html>

那么我们最常用的键盘事件有哪些呢？（很多，我只举几个，其他的按照需要吧）

@keyup.up按上键松手就会出现的事件

@keydown.up按向下键就会出现的事件

@keyup.left按左键松手就会出现的事件（是键盘上的左箭头）

@keyup.right按右键松手就会出现的事件（是键盘上的右箭头）

@keyup.enter按回车（@keyup.13）

有参数的情况下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="btn" v-on:click="">
			<input type="button" v-on:click="show($event,12)" value="显示" />
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#btn',
						data:{},
						methods:{
							show:function(ev,b){
								alert(ev.clientX);
								alert(b);
							},
						},
					});
				};
			</script>	
	</body>
</html>
发现了吗？是不是按下去和按下去松手都有各自的特点呢，加油哦，键盘事件的基本知道了，剩下的继续学习