如何实时监听 input 和 textarea输入框值的变化

Posted 2023-03-29

参考技术A 在实际前端开发中我们经常会遇到要实时监听用户的输入，根据不同的输入值来采取不同的措施。举一个常见的例子：我们在使用Google 搜索框进行搜索时，每多输入一个字，搜索框下方显示的匹配结果会实时变化。这样的效果就是通过实时监听搜索框的输入值变化从而提取不同的匹配结果来实现的。
那么，一般使用最多的输入框就是 input 和 textarea 了。要想实时监听这两种输入框的值变化，就不得不提到键盘事件 key event 了。
键盘相关事件
onkeydown
onkeypress
onkeyup
oninput
onchange
onpropertychange
onkeydown/onkeypress/onkeyup
使用这三个事件监听输入框值变化，不能监听到右键的复制、粘贴、剪切的操作。
onkeydown
按下键盘上的任意键（不包括PrScrn键）时触发；如果一直按着键不放，则会一直触发此事件。
onkeypress
按下键盘上的可显示字符键（可以参考此文的键盘按键分类一节）时触发，如果一直按着键不放，则会一直触发此事件。
onkeyup
释放键盘上的任意键（不包括PrScrn键）时触发
1、是否可以捕获组合键？
onkeydown/onkeyup可以捕获组合键，onkeypress 只能捕获单个字符。
在捕获组合键时建议使用 onkeyup 事件。
2、是否区分大小写字符？
onkeypress 能区分字符的大小写，onkeydown/onkeyup不能区分。
3、是否区分主键盘和小键盘的数字？
onkeypress不区分主键盘和小键盘的数字，onkeydown/onkeyup则可以区分。
4、触发顺序
先 onkeydown, 再 onkeypress, 最后onkeyup
参考文档
oninput/onpropertychange
上面讲到用 keydown/keypress/keyup无法监听右键粘贴复制操作，于是就有了 oninput 事件。
oninput是 html5的新事件，可以在输入框（ textarea, input:text/password/search等）的value值发生变化时（通过 JS修改输入值除外）立即触发，所以可以监听右键粘贴复制操作。但 IE9.0以下版本不支持，此时需要用到IE特有的 onpropertychange事件。在 Safari5.0以下版本，oninput 不支持 textarea 元素。
onpropertychange是 IE特有的事件，与 oninput不同的是，只要绑定对象的相关属性（不单 value 值）发生变化（包括 通过JS脚本来修改）都会触发此事件。
onchange
要触发这个事件有2个必备条件：
1、和onpropertychange一样，只要绑定对象的相关属性发生了变化就会触发此事件。但和onpropertychange不同，通过JS脚本改变属性时无法触发）；
2、输入框失去焦点后触发，所以无法做到实时监听；
键盘按键分类
键盘上的每一个按键都对应唯一的 ASCII码值，从这个角度理解其实每一个按键都是字符键。但这些按键可以分为2类： ASCII码控制字符键和 ASCII码可显示字符键。
ASCII码控制字符键
控制字符键是不会产生我们能看到的字符的按键，这类控制字符键常见的有：F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、菜单键、开始键和方向键。
常见控制字符键对应的 ASCII码见下：
ESC键 VK_ESCAPE (27)
回车键： VK_RETURN (13)
TAB键： VK_TAB (9)
Caps Lock键： VK_CAPITAL (20)
Shift键： VK_SHIFT ($10)
Ctrl键： VK_CONTROL (17)
Alt键： VK_MENU (18)
空格键： VK_SPACE (32)
退格键： VK_BACK (8)
左徽标键： VK_LWIN (91)
右徽标键： VK_LWIN (92)
鼠标右键快捷键：VK_APPS (93)
Insert键： VK_INSERT (45)
Home键： VK_HOME (36)
Page Up： VK_PRIOR (33)
PageDown： VK_NEXT (34)
End键： VK_END (35)
Delete键： VK_DELETE (46)
方向键(←)： VK_LEFT (37)
方向键(↑)： VK_UP (38)
方向键(→)： VK_RIGHT (39)
方向键(↓)： VK_DOWN (40)
F1键： VK_F1 (112)
F2键： VK_F2 (113)
F3键： VK_F3 (114)
F4键： VK_F4 (115)
F5键： VK_F5 (116)
F6键： VK_F6 (117)
F7键： VK_F7 (118)
F8键： VK_F8 (119)
F9键： VK_F9 (120)
F10键： VK_F10 (121)
F11键： VK_F11 (122)
F12键： VK_F12 (123)
ASCII码可显示字符键
可显示字符键是会产生我们能看到的字符的按键，这类按键常见得有：数字（包括 shift+数字）、字母（大小写）、小键盘。
常用可显示字符键ASCII码如下：
65 A 键
66 B 键
67 C 键
68 D 键
69 E 键
70 F 键
71 G 键
72 H 键
73 I 键
74 J 键
75 K 键
76 L 键
77 M 键
78 N 键
79 O 键
80 P 键
81 Q 键
82 R 键
83 S 键
84 T 键
85 U 键
86 V 键
87 W 键
88 X 键
89 Y 键
90 Z 键
键盘按键 ASCII 码对应表