夏日博客

A-A+

javascript onkeyup和onkeydown用法区别

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

在js中onkeyup和onkeydown是我们常用的两个方法了，下面我来给各位朋友介绍它们两的用法与区别吧，有需要了解的朋友可参考。

onkeyup

onkeyup 事件会在键盘按键被松开时发生。

语法:

onkeyup="SomeJavaScriptCode"参数 描述

SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

  1. <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,   
  2. <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>,   
  3. <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>,   
  4. <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,   
  5. <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,   
  6. <th>, <thead>, <tr>, <tt>, <ul>, <var>  

支持该事件的 JavaScript 对象：document, image, link, textarea实例,当您在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）,代码如下:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function upperCase(x)  
  5. {  
  6. var y=document.getElementById(x).value  
  7. document.getElementById(x).value=y.toUpperCase()  
  8. }  
  9. </script>  
  10. </head>  
  11. <body>  
  12.    
  13. 输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />  
  14. </body>  
  15. </html>  

onkeydown

定义和用法

onkeydown 事件会在用户按下一个键盘按键时发生。

语法:

onkeydown="SomeJavaScriptCode"参数 描述

SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

  1. <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,   
  2. <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>,   
  3. <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>,   
  4. <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,   
  5. <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,   
  6. <th>, <thead>, <tr>, <tt>, <ul>, <var>  

支持该事件的 JavaScript 对象：

document, image, link, textarea提示和注释

浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。

实例,在本例中，用户无法在输入框中键入数字,代码如下:

  1. <html>  
  2. <body>  
  3. <script type="text/javascript">  
  4. function noNumbers(e)  
  5. {  
  6. var keynum  
  7. var keychar  
  8. var numcheck  
  9. if(window.event) // IE  
  10.   {  
  11.   keynum = e.keyCode  
  12.   }  
  13. else if(e.which) // Netscape/Firefox/Opera  
  14.   {  
  15.   keynum = e.which  
  16.   }  
  17. keychar = String.fromCharCode(keynum)  
  18. numcheck = /d/  
  19. return !numcheck.test(keychar)  
  20. }  
  21. </script>  
  22. <form>  
  23. <input type="text" onkeydown="return noNumbers(event)" />  
  24. </form>  
  25. </html>  

从上面积们可以看得出来onkeydown是按下的时候触发的，这个时候键值没有输出来。 onkeyup是按键抬起的时候执行的，这个时候键值已经有了。和按多长时间没关系，比如你给输入框加这2个事件.

  1. <input type="text" id="test1" onkeydown="alert(this.value);"/>   
  2. <input type="text" id="test2" onkeyup="alert(this.value);"/>  

你看看这二个不同的运行结果就明白了,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5. <title>Insert title here</title>   
  6. </head>   
  7. <body>   
  8. <input type="text" id="test1" onkeydown="alert(this.value);"/>   
  9. <input type="text" id="test2" onkeyup="alert(this.value);"/>   
  10. </body>   
  11. </html>  

这里给出一段测试代码,代码如下:

  1. <script type="text/javascript">   
  2. document.onkeydown = function(){   
  3. document.getElementById("test").innerHTML += "keydown<br/>";   
  4. }   
  5. document.onkeyup = function(){   
  6. document.getElementById("test").innerHTML += "keyup<br/>";   
  7. }   
  8. document.onkeypress = function(){   
  9. document.getElementById("test").innerHTML += "keypress<br/>";   
  10. }   
  11. </script>   
  12. <div id="test"></div>  
  13. //测试结果为:  
  14. keydown   
  15. keypress   
  16. keyup  

显而易见,事件发生的顺序是: keydown --> keypress --> keyup

当按住一个键一段时间后再放开时,结果为:

keydown
keypress
keydown
keypress
keydown
keypress
keydown
keypress
...
keyup

标签：

给我留言