开发者学堂课程【jQuery 开发教程:jQuery_键盘事件】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4285
jQuery_键盘事件
内容介绍:
一、概要
二、常用键盘按键对应代码
三、例子
一、概要
1、 .keydown():
在键盘按下时被触发,它可以绑定到任何元素,但是该事件只是发生在具有焦点的元素上,表单元素是最合适的。
2、 .keypress():
在敲击键盘时被触发,按下并抬起同一个键。
3、 .keyup():
在按键被释放时被触发,按下并抬起同一个键。
二、常用键盘按键对应代码
Backspace <----------> 8
Tab <----------> 9
Clear <----------> 12
Enter <----------> 13
Shift <----------> 16
Control <----------> 17
Alt <----------> 18
Caps Lock <----------> 20
Esc <----------> 27
空格键 <----------> 32
三、例子
1. 用代码来获得键盘按键对应代码
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> // 引入 jQuery <script src="jquery-2.2.1.min.js"></script> </head> <body> <script> $(document).keydown(function(event){ // 弹出当前按键的代码 alert(event.keyCode); }) </script> </body> </html>
如果用退格键是8,回车键是13,空格键是32。
首先使用空格键,空格键的代码是32。
然后按下回车键,回车键的代码是13。
按下退格键,退格键的代码是8。
2. 当三者都被使用时,先触发 .keydown(),后触发 .keypress(),只有当两者都没被注册时才会触发 .keyup()。
!DOCTYPE html> <html lang=”en”> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> </head> <body> <script> $(document).keydown(function(event){ // 当触发 keydown 事件时,浏览器将会弹出一个keydown alert(“keydown”); }) $(document).keypress(function(event){ alert(“keypress”); }) $(document).keyup(function(event){ alert(“keyup”); }) </script> </body> </html>
首先按下会弹出 keydown ,然后弹出 keypress ,keyup 并没有被触发。
然后将 keydown 和 keypress 注释,刷新网页后将会触发 keyup 。