A-A+

js中kedown,keypress,keyup用法区别

2016年10月15日 web前端设计 暂无评论 阅读 8 views 次

本文章来给各位朋友简单介绍关于kedown,keypress,keyup的使用方法与一些小区别,有需要了解的朋友可参考参考。

1、keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本.

Keypress是一个强大的键盘输入捕捉JavaScript库 。拥有一些非常特殊的功能,它非常容易上手和使用,大小只有9KB,并且不依赖其它JS框架,代码如下:

  1. keypress.combo("shift s"function() {  
  2.     console.log("You pressed shift and s");  
  3. });  
  4. // There are also a few other shortcut methods:  
  5. // If we want to register a counting combo  
  6. keypress.counting_combo("tab space"function(e, count) {  
  7.     console.log("You've pressed this " + count + " times.");  
  8. });//xiariboke.com  
  9. // If you want to register a sequence combo  
  10. keypress.sequence_combo("up up down down left right left right b a enter"function() {  
  11.     lives = 30;  
  12. }, true);  

例2,代码如下:

  1. <input id="input" value="default" type="text" />  
  2. <script>  
  3. var input = document.getElementById('input');  
  4. input.onkeydown = function() {  
  5.     console.log('onkeydown ' + this.value);  
  6. }  
  7. input.onkeypress = function() {  
  8.     console.log('onkeypress ' + this.value);  
  9. }  
  10. input.onkeyup = function() {  
  11.     console.log('onkeyup ' + this.value);  
  12. }  
  13. </script>  

在文本框中敲入数字1,输出结果为:

onkeydown default

onkeypress default

onkeyup default1

2、keypress事件与keydown和keyup的主要区别

1)对中文输入法支持不好,无法响应中文输入

2)无法响应系统功能键(如delete,backspace)

3)由于前面两个限制,keyCode与keydown和keyup不是很一直

3、在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止,代码如下:

  1. <input id="input" value="default" type="text" />  
  2. <script>  
  3. var input = document.getElementById('input');  
  4. input.onkeydown = function() {  
  5.     //return false;  
  6.     console.log('onkeydown ' + this.value);  
  7. }  
  8. input.onkeypress = function() {  
  9.     //return false;  
  10.     console.log('onkeypress ' + this.value);  
  11. }  
  12. input.onkeyup = function() {  
  13.     return false;  
  14.     console.log('onkeyup ' + this.value);  
  15. }  
  16. </script>  

结果为keydown、keypress事件中return false文本框无法输入文字,在keyup事件中return false文本框可以输入文字,例,代码如下:

  1. <title>JS文字复制功能</title>   
  2. <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>   
  3. <script type="text/javascript">   
  4. $(document).ready(function(){  
  5. $("input").keyup(function () {  
  6.       var value = $(this).val();  
  7.       $("p").text(value);  
  8.     }).keyup();  
  9. });   
  10. </script>   
  11. </head>   
  12. <body>   
  13. <input type="text" id="d"  />  
  14. </body>  

例2,代码如下:

  1. <textarea id="t1"></textarea>    
  2. <div id="v1"></div>    
  3. <textarea id="t2"></textarea>    
  4. <div id="v2"></div>    
  5. <textarea id="t3"></textarea>    
  6. <div id="v3"></div>    
  7. <script type="text/javascript">    
  8. $(function() {    
  9. $('#t1').live('keyup',function() {    
  10.   $('#v1').text($(this).val());    
  11. });    
  12. $('#t2').live('keydown',function() {    
  13.   $('#v2').text($(this).val());    
  14. });    
  15. $('#t3).live('keypress',function() {    
  16.   $('#v3').text($(this).val());    
  17. });    
  18. });    
  19. </script>  

4、textInput事件

文本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup
textInput事件是DOM3后支持的,主要用来替换keypress,与keypress的主要差别在于添加了对中文输入法的支持,还有一点就是textInput只在可编辑文本区才能触发(如input、textarea),而keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的支持还不是很好,目前只有safari、chrome支持

标签:

给我留言