当前位置: 首页 > 编程笔记 >

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

娄振
2023-03-14
本文向大家介绍vue.js项目 el-input 组件 监听回车键实现搜索功能示例,包括了vue.js项目 el-input 组件 监听回车键实现搜索功能示例的使用技巧和注意事项,需要的朋友参考一下

基于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 组件 监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现,包括了Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现的使用技巧和注意事项,需要的朋友参考一下 最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现。 需求和淘宝等电商的功能大体差

  • 本文向大家介绍ui组件之input多选下拉实现方法(带有搜索功能),包括了ui组件之input多选下拉实现方法(带有搜索功能)的使用技巧和注意事项,需要的朋友参考一下 我的风格,先上效果图,如果大家感觉还不错,请参考实现代码。 废话不说 先看div层次结构 dom结构注释已经能说得清楚了,下面来看css css中设置border-sizing:border-box很重要,这个属性可以使paddin

  • 本文向大家介绍ionic监听android返回键实现“再按一次退出”功能,包括了ionic监听android返回键实现“再按一次退出”功能的使用技巧和注意事项,需要的朋友参考一下 在android平台上的app,在主页面时经常会遇到“再按一次退出app”的功能,避免只按一下返回键就退出app提升体验优化。 1、这个功能需要我们用到ionic提供的registerBackButtonAction方法

  • 本文向大家介绍Vue.js实现的购物车功能详解,包括了Vue.js实现的购物车功能详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车。 需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够

  • 我正在尝试实现一个二叉查找树,但是“搜索”函数对于除了根之外的每个条目都返回了错误的值。 该函数应返回其值与键参数匹配的节点的地址,如果节点不存在,则返回 NULL。 当我运行代码时,我得到以下内容: 我知道每个节点的“左”和“右”指针链接正确,因为“delAll”函数成功删除了所有节点。 将“cout”语句添加到“search”函数表明该函数似乎返回了正确的地址。为什么从主主调用时会打印错误的地

  • 本文向大家介绍jQuery实现搜索页面关键字的功能,包括了jQuery实现搜索页面关键字的功能的使用技巧和注意事项,需要的朋友参考一下 在一篇文章中查找关键字,找到后高亮显示。 具体代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。