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

最新推荐文章于 2022-03-21 13:23:07 发布

java阳旭

最新推荐文章于 2022-03-21 13:23:07 发布

阅读量1k

点赞数 6

分类专栏： Vue 文章标签： vue js javascript event

本文链接：https://blog.csdn.net/gaoxiaokun4282/article/details/106301014/

版权

Vue 专栏收录该内容

18 篇文章 7 订阅

订阅专栏

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

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>

java阳旭

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Vue.js入门笔记（四）--v-on键盘事件和阻止事件默认行为

案例：实现在输入框内只允许输入数字，输入其他字符无效的功能。1、原生 JavaScript 的 onkeydown 事件<input type="text" onkeydown="preventKeyCode()" />function preventKeyCode() { //event对象、document对象以及window对象可以不用定义直接使用 var keyCode = event.keyCode; if(event.keyCode < 48 || e
复制链接

扫一扫