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框,在失去焦点后 ...
随机推荐
- 写php用什么编辑器
编辑器是编程工作者强有力的工具,一款好的编辑器可以大大加快程序员的开发速度.那么,如何在众多编辑器中选出顺手的编辑器呢? 下面为大家推荐几款好评较多的编辑器: 1.NetBeans —— 免费,开源, ...
- 2019 上海网络赛 J stone name (01背包)
题目:https://nanti.jisuanke.com/t/41420 题意:给你一个集合,然后让你拆成两个集合 x,y 求满足 x>y && x-(x集合中最小 ...
- 有道翻译爬取【json】
''' @Modify Time @Author ------------ ------- 2019/9/2 0:19 laoalo ''' import requests import json i ...
- PHP 最全的正则表达式
一.校验数字的表达式 1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0 ...
- sqlserver安装-1
原文地址: https://blog.csdn.net/qq_41432123/article/details/79053486 下载:(免费使用安装dev版) ed2k://|file|cn_sql ...
- (转)基于TLS证书手动部署kubernetes集群(下)
转:https://www.cnblogs.com/wdliu/p/9152347.html 一.master节点组件部署 承接上篇文章--基于TLS证书手动部署kubernetes集群(上),我们已 ...
- 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 是 ...
- Python中import的使用方法
源文出处: "import"的本质参照: Python中import机制 python导入自定义模块和包
- day18—Flex弹性布局详解(二)
转行学开发,代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content ...
- Bootstrap 学习笔记11 按钮和折叠插件
复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...