vue-ivew input 框 回车搜索功能

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 框 回车搜索功能的更多相关文章
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- yii2组件之下拉框带搜索功能(yii-select2)
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...
- input搜索框的搜索功能
如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...
- Vue几行代码实现搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- yii2下拉框带搜索功能
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...
- html 设置input框的记忆功能(联想内容)
autocomplete=“on/off” 1.默认情况下,autocomplete的值是on.你可以将其设置为off. 2.autocomplete属性可以放在input 元素上,也可以放在form ...
- Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能
地址:https://harvesthq.github.io/chosen/ 效果: 因为只需要这个功能,就只研究这个功能了,代码: <!doctype html> <html la ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- 吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...
随机推荐
- [Ctsc2015]misc
https://lydsy.com/JudgeOnline/problem.php?id=4055 题解 观察题目要我们求的东西: \[ ans[k]=\sum_{i}\sum_j \frac{a_i ...
- laravel5.6 ORM 关联模型,一对一和一对多
Laravel5.6 关联模型的操作,主要是一对一,一对多,多对多等操作.下面示例主要解析前面两个操作用法比较常用.(操作和用法TP5类似)将关联查询使用语法hasOne.hasMany.belong ...
- (转)Kubernetes部署WordPress+MySQL
转:http://www.showerlee.com/archives/2336 这部分我们结合之前的k8s知识点给大家展示如何使用kubernetes部署wordpress+MySQL, 并利用NF ...
- HTML5 新属性的讲解
1.选择器: 标签选择器: class选择器: id选择器: 后代选择器:div li div下所有li 子代选择器:div>li div的所有子一代 li 元素 交集选择器:div.class ...
- unity项目警告之 LF CRLF问题
unity中创建的脚本,以LF结尾. Visual studio中创建的脚本,以 CRLF结尾. 当我们创建一个unity脚本后,再用VS打开编辑保存后,这个文件既有LF结尾符,也有CRLF结尾符. ...
- EZOJ #387字符串
分析 似乎ttl的模拟赛t3总是折半搜索? 先把所有串转化为每个字母的0/1状态 之后我们将所有字符串分为两半 分别枚举状态 我们发现只有左右两边的字母状态相等才能保证这个集合合法 所以我们在搜左半边 ...
- php中的构造函数与析构函数
PHP面向对象——构造函数.析构函数 __construct.__destruct__construct 构造方法,当一个对象创建时调用此方法,使用此方法的好处是:可以使构造方法有一个独一无二的名称, ...
- 慎用create table as select,一定要注意默认值的问题
再做一些数据迁移时候,很多人会使用create table as select * from table where id=-1的方式来年建立一摸一样的表,但是这样做有个很大的弊端,不能将原表中的d ...
- PHP调试环境之:Eclipse for PHP
Eclipse IDE for PHP Developers + Zend Debugger Feature . 在网上搜过一些朋友配置 eclipse --> php --> pdt , ...
- 【ABAP系列】SAP ABAP-模块 字符串操作基础知识
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP-模块 字符串操 ...