vue.js项目 el-input 组件 监听回车键实现搜索功能示例


Posted in Javascript onAugust 25, 2018

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样:

el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter

<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input>


<input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">

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

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 属性来解决:

var keyCode = window.event ? e.keyCode:e.which;

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

浏览器支持:谷歌、火狐、ie9、safari、欧朋

以上这篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
React如何避免重渲染
Apr 10 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
You might like
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
pandas计数 value_counts()的使用
2019/06/24 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
SQL SERVER面试资料
2013/03/30 面试题
工程部经理岗位职责
2013/12/08 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang