时间戳

首页 > 技术文章 > js进阶 12-4 jquery键盘事件如何使用

js进阶 12-4 jquery键盘事件如何使用

Renyi-Fan 2018-07-04 21:41 原文

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>

 

 

 

 

推荐阅读