js键盘相关知识总结

Posted 2020-12-29 94pm

一、相应事件

keydown:按下键盘上的任意键都可触发，按着不放则重复触发

keypress:按下键盘上的字符键时触发，按着不放则重复触发

keyup:释放按键时触发

事件顺序:keydown>keypress>keypup

在文本框中捕获按键事件需要注意的地方：

1.keydown、keypress是在文本框内容变化前发生，keyup则是在文本框变化后发生。

 2.如果输入的是中文，keypress不会触发

二、如何获取按键值

在js获取键盘按下的键值有：event.keyCode、event.charCode和event.which。

谷歌浏览器：对event.keyCode、event.charCode和event.which都兼容。

火狐浏览器：对event.keyCode部分键值有效，如上下左右键(37,38,39,40)，enter键(13)，PgUp(33),PgDn(34)等部分有效，对数字键，字母键无效。

event.which也是部分键值有效，如字母键，数字键，enter键，Backspace键等有效，对上下左右键，PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效，如字母键，数字键，，Backspace键等有效，对enter键，上下左右键，PgUp(33),PgDn(34)键无效。

ie浏览器：中，IE8及以下浏览器无event.charCode和event.which，event.keyCode对大部分键值能获得，但是有少部分也不能获得

兼容性的写法如下：

var code=e.keyCode || e.which || e.charCode

三、该用什么事件来获取按键值

• KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。
• KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
• KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
• KeyPress 只能捕获单个字符，KeyDown 和KeyUp 可以捕获组合键。
• KeyPress 可以捕获单个字符的大小写，KeyDown和KeyUp 不能。
• KeyPress 不区分小键盘和主键盘的数字字符，KeyDown 和KeyUp 区分。

总结：用keypress事件对象获取按键字符，用keydown事件获取功能字符(如Enter，Backspace等)