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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)相关的知识,希望对你有一定的参考价值。

 

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

以上是关于记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)的主要内容,如果未能解决你的问题,请参考以下文章

如何检查是不是在 KeyUp 事件的文本框中输入了数字或字母 [重复]

javascript得到键盘keydown和keyup输入

Javascript autotab keyup/keydown 在 Cordova Android 浏览器中不起作用

keydown,keypress,keyup三者之间的区别

C# keyup 事件问题

从 keyup 事件中获取角色