vue监听键盘回车事件的三种方法..

方法一:

@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCode

if(ev.keyCode==13){

alert('你按了回车键!')

}

方法二:

<input type="text" @keyup.enter="show()">回车执行

<input type="text" @keydown.up='show()' >上键执行

<input type="text" @keydown.down='show()' >下键执行

<input type="text" @keydown.left='show()' >左键执行

<input type="text" @keydown.right='show()' >右键执行

方法三:

<el-button type="primary" @click="login">登录

created() {

this.keyupSubmit();

},

methods(){

keyupSubmit() {

document.onkeydown = (e) => {

let _key = window.event.keyCode;

//!this.clickState是防止用户重复点击回车

if (_key === 13&&!this.clickState) {

this.login();

}

};

},

}


复制代码
                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/qq_45067263/article/details/137640383

相关推荐
reembarkation26 分钟前
vue3中使用howler播放音频列表
前端·vue.js·音视频
用户806138166591 小时前
发布为一个 npm 包
前端·javascript
TT_哲哲1 小时前
小程序双模式(文件 / 照片)上传组件封装与解析
前端·javascript
从文处安2 小时前
「九九八十一难」从回调地狱到异步秩序:深入理解 JavaScript Promise
前端·javascript
要换昵称了2 小时前
Axios二次封装及API 调用框架
前端·vue.js
进击的尘埃2 小时前
Node.js 子进程管理:child_process 模块的正确打开方式
javascript
angerdream2 小时前
最新版vue3+TypeScript开发入门到实战教程之Pinia详解
前端·javascript·vue.js
怜悯2 小时前
uniapp 如何实现google登录-安卓端
前端·javascript
TT_哲哲2 小时前
小程序解析字符串拼接多图 点击放大展示
前端·javascript
假装没有名字2 小时前
Vue2、Vue3中的$scopedSlots和$slots区别
vue.js