Vue 2_3.vue的v-on键盘事件和阻止事件默认行为

最新推荐文章于 2024-04-17 01:14:11 发布

杰克L

最新推荐文章于 2024-04-17 01:14:11 发布

阅读量711

点赞数

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

本文链接：https://blog.csdn.net/weixin_46503633/article/details/117393297

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue中键盘事件的关键字是 v-on:keydown，格式为 v-on:keydown=“fun($event)”

（$event是vue中的事件对象，和我们传统js中的event对象是一样的）

接下来就用一个案例来演示一遍吧。给input输入框添加键盘事件，限定只可以输入数字：
在body中给input添加v-on事件：

<body>
	<div id="jieke">
		<input type="text" v-on:keydown="fun($event)" />
	</div>
</body>

在js中添加函数：

<script type="text/jscript">
	new Vue({
		el: "#jieke",
		methods: {
			fun:function(event){
				var code = event.keyCode;
				if(code<48 || code>57){
					event.preventDefault();
					alert("只支持输入数字！");
				}
			}
		}
	});
</script>

对代码的解释：
在这里插入图片描述
运行结果：
（当输入数字的时候可以正常输入，当点击键盘上其他按键的话则会阻止并弹出对话框提示）

杰克L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 2_3.vue的v-on键盘事件和阻止事件默认行为

vue中键盘事件的关键字是 v-on:keydown，格式为 v-on:keydown=“fun($event)”（$event是vue中的事件对象，和我们传统js中的event对象是一样的）接下来就用一个案例来演示一遍吧。给input输入框添加键盘事件，限定只可以输入数字：在body中给input添加v-on事件：<body> <div id="jieke"> <input type="text" v-on:keydown="fun($event)" /&g
复制链接

扫一扫