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 replace 与replaceall实例用法详解
Aug 03 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python简单读取大文件的方法
2016/07/01 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python如何修改装饰器中参数
2018/03/20 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python callable内置函数原理解析
2020/03/05 Python
python给list排序的简单方法
2020/12/10 Python
请说出几个常用的异常类
2013/01/08 面试题
自荐信的五个重要部分
2013/10/29 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
培训督导岗位职责
2015/04/10 职场文书