Vue.js入门笔记（四）–v-on键盘事件和阻止事件默认行为

案例：实现在输入框内只允许输入数字，输入其他字符无效的功能。

1、原生 JavaScript 的 onkeydown 事件

1	<input type="text" onkeydown="preventKeyCode()" />

1
2
3
4
5
6
7
8

function preventKeyCode() {
//event对象、document对象以及window对象可以不用定义直接使用
var keyCode = event.keyCode;
if(event.keyCode < 48 || event.keyCode > 57){
//阻止键盘的按键起作用
event.preventDefault();
}
}

2、Vue.js 的 onkeydown 事件

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13

new Vue({
el:"#app",
methods:{
//$event是vue中的事件对象，与原生js的event对象一样
preventKeyCode:function(event){
var keyCode = event.keyCode;
if(event.keyCode < 48 || event.keyCode > 57){
//阻止键盘的按键起作用
event.preventDefault();
}
}
}
});

运行效果：
在这里插入图片描述
3、完整 Demo 代码

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
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="vuePreventKeyCode($event)">
<hr/>
原生JS：<input type="text" onkeydown="preventKeyCode()" />
</div>
</body>
<script>
new Vue({
el:"#app",
methods:{
//$event是vue中的事件对象，与原生js的event对象一样
vuePreventKeyCode:function(event){
var keyCode = event.keyCode;
if(event.keyCode < 48 || event.keyCode > 57){
//阻止键盘的按键起作用
event.preventDefault();
}
}
}
});
//原生js的键盘按下事件
function preventKeyCode() {
//$event是vue中的事件对象，与原生js的event对象一样
var keyCode = event.keyCode;
if(event.keyCode < 48 || event.keyCode > 57){
//阻止键盘的按键起作用
event.preventDefault();
}
}
</script>
</html>