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 相关文章推荐
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 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将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python字典一键多值实例代码分享
2019/06/14 Python
python实现从wind导入数据
2019/12/03 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
员工自我鉴定范文
2013/10/06 职场文书
毕业生求职推荐信
2013/11/04 职场文书
财务部经理岗位职责
2014/02/03 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
导师就业推荐信范文
2014/05/22 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014年班务工作总结
2014/12/02 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2019消防宣传标语!
2019/07/10 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python