使用回车键执行input框事件
html:
<input type="text" class="search-data-input" placeholder="请输入关键词" />
<button class="layui-btn layui-btn-sm search-data-btn"><i class="layui-icon" style="font-size: 30px;"></i></button>
js:
//回车搜索
$('.search-data-input').bind('keydown', function (event) {
var event = window.event || arguments.callee.caller.arguments[0];
if (event.keyCode == 13){
searKeywordCache = $('.search-data-input').val();
searchData();
}
});
//点击按钮搜索
$('.search-data-btn').click(function () {
searKeywordCache = $('.search-data-input').val();
searchData();
});
实现的思路就是响应键盘事件。下面是搜集到的keyCode:
1 js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:
2 keyCode 8 = BackSpace BackSpace
3 keyCode 9 = Tab Tab
4 keyCode 12 = Clear
5 keyCode 13 = Enter
6 keyCode 16 = Shift_L
7 keyCode 17 = Control_L
8 keyCode 18 = Alt_L
9 keyCode 19 = Pause
10 keyCode 20 = Caps_Lock
11 keyCode 27 = Escape Escape
12 keyCode 32 = space
13 keyCode 33 = Prior
14 keyCode 34 = Next
15 keyCode 35 = End
16 keyCode 36 = Home
17 keyCode 37 = Left
18 keyCode 38 = Up
19 keyCode 39 = Right
20 keyCode 40 = Down
21 keyCode 41 = Select
22 keyCode 42 = Print
23 keyCode 43 = Execute
24 keyCode 45 = Insert
25 keyCode 46 = Delete
26 keyCode 47 = Help
27 keyCode 48 = 0 equal braceright
28 keyCode 49 = 1 exclam onesuperior
29 keyCode 50 = 2 quotedbl twosuperior
30 keyCode 51 = 3 section threesuperior
31 keyCode 52 = 4 dollar
32 keyCode 53 = 5 percent
33 keyCode 54 = 6 ampersand
34 keyCode 55 = 7 slash braceleft
35 keyCode 56 = 8 parenleft bracketleft
36 keyCode 57 = 9 parenright bracketright
37 keyCode 65 = a A
38 keyCode 66 = b B
39 keyCode 67 = c C
40 keyCode 68 = d D
41 keyCode 69 = e E EuroSign
42 keyCode 70 = f F
43 keyCode 71 = g G
44 keyCode 72 = h H
45 keyCode 73 = i I
46 keyCode 74 = j J
47 keyCode 75 = k K
48 keyCode 76 = l L
49 keyCode 77 = m M mu
50 keyCode 78 = n N
51 keyCode 79 = o O
52 keyCode 80 = p P
53 keyCode 81 = q Q at
54 keyCode 82 = r R
55 keyCode 83 = s S
56 keyCode 84 = t T
57 keyCode 85 = u U
58 keyCode 86 = v V
59 keyCode 87 = w W
60 keyCode 88 = x X
61 keyCode 89 = y Y
62 keyCode 90 = z Z
63 keyCode 96 = KP_0 KP_0
64 keyCode 97 = KP_1 KP_1
65 keyCode 98 = KP_2 KP_2
66 keyCode 99 = KP_3 KP_3
67 keyCode 100 = KP_4 KP_4
68 keyCode 101 = KP_5 KP_5
69 keyCode 102 = KP_6 KP_6
70 keyCode 103 = KP_7 KP_7
71 keyCode 104 = KP_8 KP_8
72 keyCode 105 = KP_9 KP_9
73 keyCode 106 = KP_Multiply KP_Multiply
74 keyCode 107 = KP_Add KP_Add
75 keyCode 108 = KP_Separator KP_Separator
76 keyCode 109 = KP_Subtract KP_Subtract
77 keyCode 110 = KP_Decimal KP_Decimal
78 keyCode 111 = KP_Divide KP_Divide
79 keyCode 112 = F1
80 keyCode 113 = F2
81 keyCode 114 = F3
82 keyCode 115 = F4
83 keyCode 116 = F5
84 keyCode 117 = F6
85 keyCode 118 = F7
86 keyCode 119 = F8
87 keyCode 120 = F9
88 keyCode 121 = F10
89 keyCode 122 = F11
90 keyCode 123 = F12
91 keyCode 124 = F13
92 keyCode 125 = F14
93 keyCode 126 = F15
94 keyCode 127 = F16
95 keyCode 128 = F17
96 keyCode 129 = F18
97 keyCode 130 = F19
98 keyCode 131 = F20
99 keyCode 132 = F21
100 keyCode 133 = F22
101 keyCode 134 = F23
102 keyCode 135 = F24
103 keyCode 136 = Num_Lock
104 keyCode 137 = Scroll_Lock
105 keyCode 187 = acute grave
106 keyCode 188 = comma semicolon
107 keyCode 189 = minus underscore
108 keyCode 190 = period colon
109 keyCode 192 = numbersign apostrophe
110 keyCode 210 = plusminus hyphen macron
111 keyCode 211 =
112 keyCode 212 = copyright registered
113 keyCode 213 = guillemotleft guillemotright
114 keyCode 214 = masculine ordfeminine
115 keyCode 215 = ae AE
116 keyCode 216 = cent yen
117 keyCode 217 = questiondown exclamdown
118 keyCode 218 = onequarter onehalf threequarters
119 keyCode 220 = less greater bar
120 keyCode 221 = plus asterisk asciitilde
121 keyCode 227 = multiply division
122 keyCode 228 = acircumflex Acircumflex
123 keyCode 229 = ecircumflex Ecircumflex
124 keyCode 230 = icircumflex Icircumflex
125 keyCode 231 = ocircumflex Ocircumflex
126 keyCode 232 = ucircumflex Ucircumflex
127 keyCode 233 = ntilde Ntilde
128 keyCode 234 = yacute Yacute
129 keyCode 235 = oslash Ooblique
130 keyCode 236 = aring Aring
131 keyCode 237 = ccedilla Ccedilla
132 keyCode 238 = thorn THORN
133 keyCode 239 = eth ETH
134 keyCode 240 = diaeresis cedilla currency
135 keyCode 241 = agrave Agrave atilde Atilde
136 keyCode 242 = egrave Egrave
137 keyCode 243 = igrave Igrave
138 keyCode 244 = ograve Ograve otilde Otilde
139 keyCode 245 = ugrave Ugrave
140 keyCode 246 = adiaeresis Adiaeresis
141 keyCode 247 = ediaeresis Ediaeresis
142 keyCode 248 = idiaeresis Idiaeresis
143 keyCode 249 = odiaeresis Odiaeresis
144 keyCode 250 = udiaeresis Udiaeresis
145 keyCode 251 = ssharp question backslash
146 keyCode 252 = asciicircum degree
147 keyCode 253 = 3 sterling
148 keyCode 254 = Mode_switch
149 使用event对象的keyCode属性判断输入的键值
150 eg:if(event.keyCode==13)alert(“enter!”);
151 键值对应表
152 A 0X65 U 0X85
153 B 0X66 V 0X86
154 C 0X67 W 0X87
155 D 0X68 X 0X88
156 E 0X69 Y 0X89
157 F 0X70 Z 0X90
158 G 0X71 0 0X48
159 H 0X72 1 0X49
160 I 0X73 2 0X50
161 J 0X74 3 0X51
162 K 0X75 4 0X52
163 L 0X76 5 0X53
164 M 0X77 6 0X54
165 N 0X78 7 0X55
166 O 0X79 8 0X56
167 P 0X80 9 0X57
168 Q 0X81 ESC 0X1B
169 R 0X82 CTRL 0X11
170 S 0X83 SHIFT 0X10
171 T 0X84 ENTER 0XD
172 如果要使用组合键,则可以判断是否同时按下了这几个键,比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键
使用回车键执行input框事件的更多相关文章
- javascript onblur事件阻塞选中input框
先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- 通过定时监听input框来实现onkeyup事件-
问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...
- 吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- 主动触发input框的失去焦点事件,阻止输入法跳出
今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来, 网上一个方法是:在input框的获取焦点事件里,主动触发失去 ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- 事件和方法的区别,以input框的blur事件为例
1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调 三者是不相同的 事件:指的是一个 ...
- 页面加载后的input change事件 1或2个框 ajax
数据层没有,js和bll直接链接,数据层用的hqew. js: window.onload = function () { //型号input 改变 事件 $("#typeofproduct ...
随机推荐
- 程序员过关斩将--cookie和session的关系其实很简单
月高风下,下班路上.... 菜菜哥,告诉你一个秘密,但是不允许告诉任何人 这么秘密,你有男票了?~ 不是,昨天我偷偷去面试了,结果挂了 这不是好事吗,上天让公司留住你..... 好吧,不过还是要请教你 ...
- SpringBoot:Java High Level REST Client 搜索 API
Springboot整合最新版elasticSearch参考之前的文章:SpingBoot:整合ElasticSearch 7.2.0 Search API SearchRequest用于与搜索文档, ...
- 消息中间件——RabbitMQ(七)高级特性全在这里!(上)
前言 前面我们介绍了RabbitMQ的安装.各大消息中间件的对比.AMQP核心概念.管控台的使用.快速入门RabbitMQ.本章将介绍RabbitMQ的高级特性.分两篇(上/下)进行介绍. 消息如何保 ...
- ionic app 优化三件套,让其更贴近原生app
这里推荐一个ionic大神的简书,里面有好多关于好多ionic的技术分享! http://www.jianshu.com/u/c2e637a941ef 捣鼓了好久的ionic,终于在优化过程终于有所进 ...
- Kubernetes 弹性伸缩全场景解读(五) - 定时伸缩组件发布与开源
作者| 阿里云容器技术专家刘中巍(莫源) 导读:Kubernetes弹性伸缩系列文章为读者一一解析了各个弹性伸缩组件的相关原理和用法.本篇文章中,阿里云容器技术专家莫源将为你带来定时伸缩组件 kub ...
- Leetcode之二分法专题-167. 两数之和 II - 输入有序数组(Two Sum II - Input array is sorted)
Leetcode之二分法专题-167. 两数之和 II - 输入有序数组(Two Sum II - Input array is sorted) 给定一个已按照升序排列 的有序数组,找到两个数使得它们 ...
- sql server创建序列sequence
1.创建一个序列对象 CREATE SEQUENCE [schema_name . ] sequence_name START WITH <constant> INCREMENT BY & ...
- awrcrt更新到2.17 ,添加了top SQL list
应广大Oracle专家,教授的要求(被问了很多次,什么时候添加top sql 啊~~,最近一年由于很少交付巡检类的服务,所以没有机会更新)>终于为awrcrt更新了Top SQL list,版本 ...
- 从零开始搭建Java开发环境第一篇:Java工程师必备软件大合集
1.JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 目前主流的JDK版 ...
- 检查python标识符是否有效