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 相关文章推荐
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
详解React的回调渲染模式
Sep 10 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
python生成器的使用方法
2013/11/21 Python
Python lambda和Python def区别分析
2014/11/30 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python 学习教程之networkx
2019/04/15 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python之array赋值技巧分享
2019/11/28 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
银行实习生的自我评价
2013/12/09 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年妇联工作总结
2014/11/21 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
小学体育教学随笔
2015/08/14 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python