记录JavaScript中使用keyup事件做输入验证（附event.keyCode表）

Posted 2021-01-12

 

input的blur事件

$("#input-name").blur(function () {

    var value = $(this).val();

    if (value === \'\') {
        return;
    }

    if (/^[\\u4e00-\\u9fa5]{1,3}$/.test(value)) {
        $(this).removeClass("error-class");
    } else {
        $(this).addClass("error-class");
    }

});

keyup事件

$(document).on(\'keyup\', \'.error-class\', function (event) {
    // Avoid revalidate the field when pressing one of the following keys
    // Shift       => 16
    // Ctrl        => 17
    // Alt         => 18
    // Caps lock   => 20
    // End         => 35
    // Home        => 36
    // Left arrow  => 37
    // Up arrow    => 38
    // Right arrow => 39
    // Down arrow  => 40
    // Insert      => 45
    // Num lock    => 144
    // AltGr key   => 225

    //keyup事件中需要排除掉的按键，因为这些按键并不会改变input的value
    var excludedKeys = [
        16, 17, 18, 20, 35, 36, 37,
        38, 39, 40, 45, 144, 225
    ];

    //event.which === 9 是键盘左侧的Tab键，当input失焦且值为空时，不需要做验证
    if (event.which === 9 && $(this).val() === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
        return;
    }

    //验证输入内容，验证通过就移除报错样式error-class，反之则添加
   if (/^[\\u4e00-\\u9fa5]{1,3}$/.test($(this).val())) {
       $(this).removeClass("error-class");
   } else {
       $(this).addClass("error-class");
   }
});

keyup事件代码是我从著名的jq表单验证插件jquery.validate.js扣出来的。

但在某些内容较为简单的页面，使用jquery.validate.js让我觉得太累赘，我就扣出来手写了这个验证，发现这里的事件绑定技巧和keyCode比较有用，特此记录一下。

 

事件绑定思路

首先，对input的blur事件绑定处理方法，用正则验证输入；验证通过移除报错样式error-class，反之则添加；

其次，使用$(document).on(\'keyup\', \'.error-class\'，function(){}) 为含有报错样式error-class的元素绑定keyup事件处理方法；

 

关键点就在于keyup事件处理方法要绑定在含有error-class的元素上，如果一开始对input绑定keyup事件处理方法，那么用户在敲击第一个按键时就触发了keyup事件进行正则验证，若正则要求至少3个字符，而用户只敲了一个字符便出现了报错信息，用户还没有输入完毕就提示错误这样的交互设计是不允许的。

正确的交互是：1、用户首次输入时，让其输入完毕后（即blur事件）才做正则验证，blur事件处理方法对用户的完整输入进行正则验证，反馈错误信息；2、用户根据反馈修正输入，当错误内容被修改至正确时则立即（keyup事件）移除报错样式；3、内容没有错误的input不触发keyup事件处理方法。

 

虽然blur事件的处理方法也会移除报错样式，但没有keyup事件处理的及时；相对blur而言，使用keyup事件可以提升页面的友好度。

另外，这里为什么不用$(".error-class").keyup()绑定事件处理方法，而是用$(document).on(\'keyup\')，不懂的同学查一下两者的差异就明白了。

 

event.which、event.keyCode、event.charCode的区别

三者是之前为适应不同浏览器而产生的，其中event.which 将 event.keyCode 和 event.charCode 标准化了。JQuery官方推荐使用event.which：http://api.jquery.com/event.which/ 。

随着时代变迁，目前主流、新版的浏览器对event.which和event.keyCode都有很好的支持。

 

keyCode表

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

 

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

 

控制键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	\'"	222

 

多媒体键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

 

keycode表出处：水木 http://www.cnblogs.com/hsapphire/archive/2009/12/16/1625642.html