js进阶 12-4 jquery键盘事件如何使用
一、总结
一句话总结：键盘和鼠标都是外设输入设备，所以函数很像，所以使用就像鼠标事件click一样
1、jquery键盘事件有哪三个？
1（up和down）+1（press）
up和down是一组，press是另外一组
keydown() 当键盘或按钮被按下时，发生 keydown 事件。
keyup() 在键盘的某个键被按下之后松开的一瞬间触发的事件。。
keypress() 在键盘上的某个键被按下到松开“整个过程”中触发的事件。
2、jquery键盘事件如何使用？
就像鼠标事件click一样，一个是鼠标，一个是键盘，都是外设输入设备，差不多啦
17 $('input').keydown(function(){
18 alert('keydown事件')
19 //$(this).val('keydown事件')
20 })
3、keypress事件和keydown事件的区别是什么？
a、keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
b、keydown()、keyup()返回的是键码，kepress()返回的是字符编码（用脚趾头想就知道为什么有这个）
4、jquery中推荐用什么来监视键盘输入？
event.which
36 $(document).keypress(function(e){
37 // alert(e.charCode)
38 alert(e.which)
39 })
40 //不过jQuery中event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
5、如何监视键盘输入？
用键盘事件的事件对象event的属性来知道到底输入的是哪个键
36 $(document).keypress(function(e){
37 // alert(e.charCode)
38 alert(e.which)
39 })
二、jquery键盘事件如何使用
1、相关知识
键盘事件
- keydown() 当键盘或按钮被按下时，发生 keydown 事件。
- keyup() 在键盘的某个键被按下之后松开的一瞬间触发的事件。。
- keypress() 在键盘上的某个键被按下到松开“整个过程”中触发的事件。
keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
event.which 指示按了哪个键或按钮。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 </style> 10 </head> 11 <body> 12 <h3>键盘事件-键盘事件</h3> 13 <input type="text"> 14 <script type="text/javascript"> 15 $(function(){ 16 17 $('input').keydown(function(){ 18 alert('keydown事件') 19 //$(this).val('keydown事件') 20 }) 21 22 $('input').keyup(function(){ 23 $(this).val('keyup事件') 24 }) 25 26 $('input').keypress(function(){ 27 alert('keypress事件') 28 //$(this).val('keypress事件') 29 }) 30 //这3个事件的先后顺序：keydown→keypress→keyup。 31 //keydown()、keyup()返回的是键码，kepress()返回的是字符编码 32 $(document).keydown(function(e){ 33 // alert(e.keyCode) 34 alert(e.which) 35 }) 36 $(document).keypress(function(e){ 37 // alert(e.charCode) 38 alert(e.which) 39 }) 40 //不过jQuery中event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。 41 42 }) 43 </script> 44 </body> 45 </html>