解决Element UI input输入框不能使用回车进行搜索

因为使用vue修饰符绑定键盘事件报错,不知道怎么解决...
所以想出了一个神奇的解决方法...

1、绑定输入事件,每次输入就把输入的内容存到本地储存

<el-input placeholder="搜索一下" v-model="searchInput" @input="inputSearchInfo" clearable></el-input>


//输入搜索内容
inputSearchInfo() {
    localStorage.setItem('searchInput', this.searchInput);//存入本地  
}

2、使用jQuery键盘事件解决

import myVue from '../main.js'

$(document).ready(function () {
  //判断搜索框是否获得焦点
  var searchInpuIsFocus = false;
  $('.nav .nav-search input').focus(function () {
    searchInpuIsFocus = true;
  })
  $('.nav .nav-search input').blur(function () {
    searchInpuIsFocus = false;
  })

  //监听键盘事件
  $(document).keydown(function (event) {
    var searchInfo = localStorage.getItem('searchInput').trim();//本地取出
    //按下回车、输入不为空、搜索内容跟上次不相同时跳转路由
    if (event.keyCode === 13 && searchInfo != '' && myVue.$route.params.value != searchInfo) {
      myVue.$router.push({ path: '/search/' + searchInfo }); //跳转到搜索结果页面
    }
    //按下回车、输入为空、搜索框获得焦点时弹出错误提示
    else if (event.keyCode === 13 && searchInfo == '' && searchInpuIsFocus) {
      myVue.$message({
        showClose: true,
        message: '搜索内容不能为空!',
        type: 'error'
      });
    }
  });
})
Image placeholder
wl_9676
未设置
  20人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

css设置input不可编辑

css设置input不可编辑给input加上css样式pointer-events:none;即可input{ pointer-events:none; }使用pointer-events来阻止元素成

jQuery判断input是否被禁用

jQuery判断input是否被禁用判断input是否被禁用,可用的方法有:●is(":disabled")●prop("disabled")●attr("disabled") first secon

jquery怎么判断input是否为空?

jquery怎么判断input是否为空?首先需要通过val()函数获取input框的内容,然后通过比较是否和“”空字符串相等,或者字符串长度是否等于0,来进行判断。1、判断input内容是否等于空字符

HTML5新增了哪些input类型及其属性?

HTML5新增了哪些input类型及其属性?1、url类型、email、tel类型说明:当输入非url、email的字符串时,浏览器会自动提醒。 2、number类型。说明:只能输入数字,min表

input标签

input标签

01input

input是单标签,所有控件都是input。 type属性name名称value默认值 type属性 text单行文本password密码框radio单选按钮checkbox复选框hidden隐藏域f

Slenium 2 Webdriver Highlight Element

课程推荐:学习猿地推出更多免费体验课等您来哦~请点击进入 ViewCode? defhighlight_element(self,locator):"""docstringforhighlight

mysql 进行update时,要更新的字段中有单引号或者双引号导致不能批量生成sql的问题

前言将数据从一张表迁移到另外一张表的过程中,通过mysql的concat方法批量生成sql时遇到了一个问题,即进行UPDATE更新操作时如果原表中的字段中包含单引号'或者双引号",那么就会生成不正确的

[译] 是的,它是 npx,不是 npm

原文: Yes,it’snpx,notnpm—thedifferenceexplained 最近,当我开始学习React的时,看到包括我在内的很多人当看到 npx 而不是 npm 时很困惑。一些人看的

解放劳动力,拒绝crud【基于element-ui的表格模版】

缘起在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。常规操作流程: 表格组件 分页组件 弹出层组件+表单组件一套 搜索栏表单组件一套 一把梭下来写了很多样版式代码,风格可能还不统一

element-ui tree懒加载时获取节点DOM

tree提供的方法貌似没有可以直接获取节点DOM,或者点击勾选节点响应函数参数node其实只是传入data的数据对象,拿不到DOM,得想想法子来获取之事情是这样的:最近做一个表单,要能勾选一个二级的下

Element-UI 导航菜单,部分贴底

如下图,导航一二三四的高度小于100%时,接口文档贴底,大于100%时,接口文档显示在最底端。其实类似于FooterStick,但是由于导航菜单子组件的某些属性,已有的FooterStick解决方案并

笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

Ubuntu常用技巧:npm下载很慢的超简单解决方法

在使用npm下载时,速度特别特别慢,等了半小时还是纹丝不动:尝试了一些方法,效果不是很明显,最终发现一种简单有效的方法:1.终端输入命令,显示当前的镜像地址:npmgetregistry2.再输入命令

leveldb源代码分析系列1:MemTable的实现

MemTable及其实现这是一个第零层的主题,预计扩展如下第一层主题:1.1comparator介绍1.2skiplist实现介绍1.3数据压缩相关介绍1.4Put流程1.5Get流程leveldb中

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

两个月三项成果,对标谷歌!独家对话小米AutoML团队,如何让模型搜索更公平

大数据文摘出品作者:曹培信机器学习自动化(AutoML)正在引领机器学习的下一个时代,而要想让机器自己学会“炼丹”,其中最关键的步骤就是,找到最合适的算法模型,也即自动化神经架构搜索(NeuralAr

从 simplemde 写入 + inline-attachment 图片拖拽上传 到 parsedown 解析

###准备工作安装富文本编辑器sparksuite/simplemde-markdown-editor yarnaddsimplemde--save 安装markedjs/marked,在JS中解析

聊聊chronos的pullFromDefaultCFAndPush

序本文主要研究一下chronos的pullFromDefaultCFAndPushpullFromDefaultCFAndPushDDMQ/carrera-chronos/src/main/java/

干货:构建复杂的 Eloquent 搜索过滤

最近,我需要在开发的事件管理系统中实现搜索功能。一开始只是简单的几个选项(通过名称,邮箱等搜索),到后面参数变得越来越多。 今天,我会介绍整个过程以及如何构建灵活且可扩展的搜索系统。如果你想查看代码

女神说不能每张照片P的一样,所以朋友圈开三天可见,用Python一步解决

大家好,我是小三十三,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻...一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片:是谁!是谁把我女朋友的照片放出来