前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目el-input键盘事件

vue项目el-input键盘事件

作者头像
跟着阿笨一起玩NET
发布2020-06-30 16:31:59
2.6K0
发布2020-06-30 16:31:59
举报
文章被收录于专栏:跟着阿笨一起玩NET

一、 结合elemt-ui的 el-input 输入框 ,当输入之后敲回车想要搜索

@keydown.enter.native=”searchEnterFun”

代码语言:javascript
复制
<el-input placeholder="搜索" v-model="barCode" @keyup.enter.native="searchEnterFun" autofocus clearable>
</el-input>

二、普通input的键盘事件

非 element-UI 组件,直接 @keyup.enter 就可以。

代码语言:javascript
复制
<input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">

在methods方法里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值

代码语言:javascript
复制
searchEnterFun:function(e){
   var keyCode = window.event? e.keyCode:e.which;
  // console.log('回车搜索',keyCode,e);
   if(keyCode == 13 && this.input){
   this.$router.push({path:'/Share?keywords='+this.input});
   }
  }

which 和 keyCode 属性提供了解决浏览器的兼容性的方法。

keyCode属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码

注意:

在 Firefox 中,keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决:

代码语言:javascript
复制
var keyCode = window.event ? e.keyCode:e.which;

which 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、 结合elemt-ui的 el-input 输入框 ,当输入之后敲回车想要搜索
  • 二、普通input的键盘事件
    • 注意:
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档