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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Django中url的反向查询的方法
2018/03/14 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python使用folium excel绘制point
2019/01/03 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
Linux文件系统类型
2012/09/16 面试题
普通员工辞职信
2014/01/17 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
党风廉政建设责任书
2014/04/14 职场文书
学习三严三实心得体会
2014/10/13 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书