案例:实现在输入框内只允许输入数字,输入其他字符无效的功能。
1、原生 JavaScript 的 onkeydown 事件
<input type="text" onkeydown="preventKeyCode()" />
function preventKeyCode() {
//event对象、document对象以及window对象可以不用定义直接使用
var keyCode = event.keyCode;
if(event.keyCode < 48 || event.keyCode > 57){
//阻止键盘的按键起作用
event.preventDefault();
}
}
2、Vue.js 的 onkeydown 事件
<div id="app">
<input type="text" v-on:keydown="preventKeyCode($event)">
</div>
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 代码
<!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>