1. 添加事件

 <FormItem prop="user" label="产品ID:" :label-width="">
<Input type="text" v-model="formInline.productCode" @keydown.enter.native="searchEnterFun"></Input>
</FormItem>

键盘事件主要有2个:

onkeydown : 键盘按下时触发,如果按下不抬起,那么会连续触发。

onkeyup : 键盘弹起时触发

不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换言之,能够接收焦点的元素就能接收键盘事件。

2.方法

searchEnterFun(e) {
console.log();
//which 和 keyCode 属性提供了解决浏览器的兼容性的方法。
//keyCode属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码
var keyCode = window.event? e.keyCode:e.which;
if (keyCode == ) {
this.getproductlist(, ); //搜索事件
}
},

vue-ivew input 框 回车搜索功能的更多相关文章

  1. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  2. yii2组件之下拉框带搜索功能(yii-select2)

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...

  3. input搜索框的搜索功能

    如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...

  4. Vue几行代码实现搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. yii2下拉框带搜索功能

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...

  6. html 设置input框的记忆功能(联想内容)

    autocomplete=“on/off” 1.默认情况下,autocomplete的值是on.你可以将其设置为off. 2.autocomplete属性可以放在input 元素上,也可以放在form ...

  7. Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

    地址:https://harvesthq.github.io/chosen/ 效果: 因为只需要这个功能,就只研究这个功能了,代码: <!doctype html> <html la ...

  8. jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)

    第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...

  9. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

随机推荐

  1. 写php用什么编辑器

    编辑器是编程工作者强有力的工具,一款好的编辑器可以大大加快程序员的开发速度.那么,如何在众多编辑器中选出顺手的编辑器呢? 下面为大家推荐几款好评较多的编辑器: 1.NetBeans —— 免费,开源, ...

  2. 2019 上海网络赛 J stone name (01背包)

    题目:https://nanti.jisuanke.com/t/41420 题意:给你一个集合,然后让你拆成两个集合 x,y    求满足  x>y  &&  x-(x集合中最小 ...

  3. 有道翻译爬取【json】

    ''' @Modify Time @Author ------------ ------- 2019/9/2 0:19 laoalo ''' import requests import json i ...

  4. PHP 最全的正则表达式

    一.校验数字的表达式  1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0 ...

  5. sqlserver安装-1

    原文地址: https://blog.csdn.net/qq_41432123/article/details/79053486 下载:(免费使用安装dev版) ed2k://|file|cn_sql ...

  6. (转)基于TLS证书手动部署kubernetes集群(下)

    转:https://www.cnblogs.com/wdliu/p/9152347.html 一.master节点组件部署 承接上篇文章--基于TLS证书手动部署kubernetes集群(上),我们已 ...

  7. Malformed UTF-8 characters, possibly incorrectly encoded 或中文乱码 (Uncaught InvalidArgumentException: Malformed UTF-8 characters, possibly incorrectly encoded in)

    问题: Uncaught InvalidArgumentException: Malformed UTF-8 characters, possibly incorrectly encoded in 是 ...

  8. Python中import的使用方法

    源文出处: "import"的本质参照: Python中import机制 python导入自定义模块和包

  9. day18—Flex弹性布局详解(二)

    转行学开发,代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content ...

  10. Bootstrap 学习笔记11 按钮和折叠插件

     复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...