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. java匿名内部类 (转载)

    匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1:不使用匿名内部类来实现抽象 ...

  2. Spring学习总结(1)- IOC

    一.Spring框架概述 Spring是一个开源免费的框架,为了解决企业应用开发的复杂性而创建.Spring框架是一个轻量级的解决方案,可以一站式地构建企业级应用.Spring是模块化的,所以可以只使 ...

  3. php substr_replace()函数 语法

    php substr_replace()函数 语法 作用:替换字符串中某串为另一个字符串大理石平台价格 语法:substr_replace(string,replacement,start,lengt ...

  4. oracle 数据迁移之数据泵的基本使用

    oracle相同数据库下跨schema的表迁移—expdp/impdp 需求:将GUIDO用户下的表迁移到SCOTT用户下 select * from dba_role_privs where GRA ...

  5. Skyline(6.x)-Web二次开发-多窗口对比

    GitHub 上获取源码 1. 打开个 3D 窗口 一个页面加载多个 TerraExplorer3DWindow 和 SGWorld 等只有第一个能用(即使用 iframe 也是一样) 所以我决定打开 ...

  6. memcached php扩展(二)

    memcached php扩展(二) 安装环境链接:http://pan.baidu.com/s/1i4IbJox Memecached 服务器安装(一) memcached php扩展(二) red ...

  7. WPF国际化方式1之资源文件

    先看效果吧,个人觉得由于MVVM模式的UI响应属性变化的特殊机制,资源文件和内存数据都是国际化不错的选择. 1.首先准备两个资源文件用来做中文和英文的转换使用,将程序中需要转换语言都弄成两个版本,分别 ...

  8. js 文件下载进度监控

    var xhr = new XMLHttpRequest(); xhr.open('GET', '文件地址.mp4'); xhr.setRequestHeader("Content-type ...

  9. LeetCode 230. Kth Smallest Element in a BST 动态演示

    返回排序二叉树第K小的数 还是用先序遍历,记录index和K进行比较 class Solution { public: void helper(TreeNode* node, int& idx ...

  10. Notepad++正则表达式合并多行代码为1行

    有时候你想要缩减代码行数,多行并1行,像网页流行的JS代码,查看时多见这种情况,但是有时你想把多行switch case缩成1行,再手动分开,每个case一行. 这种对齐方式似乎在日式程序员的代码中经 ...