js常用的键盘事件有哪些(用法示例)_键码keyCode对照表

  目录

  键盘事件与鼠标事件类似,同样常出现在JavaScript开发过程中。键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时, 首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前 被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。在用户按下一个非字符键时,首先触发keydown事件,然后就是keyup事件。如果用户按下一个键不放,就会重复触发keydown。

  一、键盘事件属性

  键盘定义了很多属性,如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中,但是 ctrlKey 和 shiftKey 属性除外,因为它们可以在水保事件中存在。例如,当按下 Ctrl 或Shift 键时单击鼠标操作。

  键盘事件定义的属性

  属性说明keyCode该属性包含键盘中对应键位的键值charCode该属性包含键盘中对应键位的 Unicode 编码,仅 DOM 支持target发生事件的节点(包含元素),仅 DOM 支持srcElement发生事件的元素,仅 IE 支持shiftKey是否按下 Shift 键,如果按下返回 true,否则为falsectrlKey是否按下 Ctrl 键,如果按下返回 true,否则为falsealtKey是否按下 Alt 键,如果按下返回 true,否则为falsemetaKey是否按下 Mtea 键,如果按下返回 true,否则为false,仅 DOM 支持

  示例1

  ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中,表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下,且鼠标单击某个页面元素,则会把该元素从页面中删除。

  document.onclick = function (e) {

  var e = e || window.event; //标准化事件对象

  var t = e.target || e.srcElement; //获取发生事件的元素,兼容IE和DOM

  if (e.ctrlKey && e.shiftKey) { //如果同时按下Ctrl和Shift键

  t.parentNode.removeChild(t); //移出当前元素

  }

  }

  keyCode 和 charCode 属性使用比较复杂,但是它们在实际开发中又比较常用,故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的,如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。

  keyCode 和 charCode 属性值

  属性IE 事件模型DOM 事件模型keyCode(keypress)返回所有字符键的正确值,区分大写状态(65~90)和小写状态(97~122)功能键返回正确值,而 Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值,其他所有键值都返回 0keyCode(keydown)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)keyCode(keyup)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)charCode(keypress)不支持该属性返回字符键,区分大写状态(65~90)和小写状态(97~122),Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值,其他所有键值都返回 0charCode(keydown)不支持该属性所有键值为 0charCode(keyup)不支持该属性所有键值为 0

  某些键的可用性不是很正确,如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的。

  示例2

  下面示例演示了如何使用方向键控制页面元素的移动效果。

  

  

  键盘键码keyCode对照表

  字母和数字键的键码值(keyCode)按键键码按键键码按键键码按键键码A65J74S83149B66K75T84250C67L76U85351D68M77V86452E69N78W87553F70O79X88654G71P80Y89755H72Q81Z90856I73R82048957

  数字键盘上的各键键码值(keyCode)功能键键码值(keyCode)按键键码按键键码按键键码按键键码0968104F1112F91201979105F2113F10121298*106F3114F11122399+107F4115F121234100Enter108F51165101-109F61176102.110F71187103/111F8119

  控制键键码值(keyCode)按键键码按键键码按键键码按键键码BackSpace8Esc27Right Arrow39-_189Tab9Spacebar32Dw Arrow40.>190Clear12Page Up33Insert45/?191Enter13Page Down34Delete46`~192Shift16End35Num Lock144[{ 219Control17Home36;:186|220Alt18Left Arrow37=+187]}221Cape Lock20Up Arrow38,<188'"222

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

  到此这篇关于js常用的键盘事件有哪些_用法示例_键码keyCode对照表的文章就介绍到这了,更多相关js键盘事件keyCode内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

  您可能感兴趣的文章: