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、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

 </style>

 </head>

 <body>

 <h3>键盘事件-键盘事件</h3>

 <input type="text">

 <script type="text/javascript">

     $(function(){

         $('input').keydown(function(){

             alert('keydown事件')

             //$(this).val('keydown事件')

         })

         $('input').keyup(function(){

             $(this).val('keyup事件')

         })

         $('input').keypress(function(){

             alert('keypress事件')

             //$(this).val('keypress事件')

         })

         //这3个事件的先后顺序：keydown→keypress→keyup。

         //keydown()、keyup()返回的是键码，kepress()返回的是字符编码

         $(document).keydown(function(e){

             // alert(e.keyCode)

             alert(e.which)

         })

         $(document).keypress(function(e){

             // alert(e.charCode)

             alert(e.which)

         })

         //不过jQuery中event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

     })

 </script>

 </body>

 </html>