700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Vue 2_3.vue的v-on键盘事件和阻止事件默认行为

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

时间:2024-01-26 19:33:45

相关推荐

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)" /></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>

对代码的解释:

运行结果:

(当输入数字的时候可以正常输入,当点击键盘上其他按键的话则会阻止并弹出对话框提示)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。