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

相关推荐
光影少年2 分钟前
Polyline 组件如何绘制渐变区域?
前端·javascript·掘金·金石计划
普通网友14 分钟前
JavaScript:ESLint+Prettier 规范代码格式
开发语言·javascript·ecmascript
jiayong2327 分钟前
第 38 课:任务列表里高亮当前正在查看详情的任务
开发语言·前端·javascript·vue.js·学习
兔子零10241 小时前
GPT-5.5 与 DeepSeek-V4:大模型竞争的本质,正在从“谁更强”变成“谁让成本更低”
前端·javascript·后端
火山口车神丶1 小时前
如何借助AI进行模块封装DIY
javascript·人工智能·算法
搬搬砖得了2 小时前
Vue 响应式对象异步赋值作为 Props:二次渲染问题与组件设计哲学
前端·vue.js
悟空瞎说2 小时前
收藏即复用!50个极致实用JavaScript单行代码,前端开发效率直接拉满
javascript
薯老板3 小时前
事件循环(Event Loop)
javascript
睿智的海鸥4 小时前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
Highcharts.js4 小时前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts