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

相关推荐
漠月瑾-西安3 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
止观止3 小时前
React响应式组件范式:从类组件到Hooks
javascript·react.js·ecmascript
@大迁世界3 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
LJianK14 小时前
Java和JavaScript的&&和||
java·javascript·python
mldong4 小时前
mldong-goframe:基于 GoFrame + Vben5 的全栈快速开发框架正式开源!
vue.js·后端·go
新酱爱学习4 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
爱编程的喵6 小时前
深入理解JavaScript单例模式:从Storage封装到Modal弹窗的实战应用
前端·javascript
南棱笑笑生6 小时前
20250715给荣品RD-RK3588开发板刷Android14时打开USB鼠标
android·计算机外设
快起来别睡了6 小时前
Vuex 与 Pinia:Vue 状态管理详解,小白也能看懂
vue.js
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app