- keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,就会重复触发此事件。
- keypress:当用户按下键盘上的任意键时触发,而且如果按住不放的话,就会重复触发此事件。
- keyup:当用户释放键盘上的键时触发
- textInput:文本事件
当先触发keydown事件,然后紧跟着是keypress事件,最后是keyup事件
其中keydown和keypress都是在文本框发生变化之前被触发的,而keyup事件则是在文本框发生变化之后被触发的
keyCode与charCode的区别
keyCode属性: 表示键盘按键码。因此输入“a”字母和“A”字母时,都是显示键盘码 65 ;IE 与 w 3c兼容浏览器 keydown ,keyup 时 event 的 keyCode 为实际按键的值 。例如:shift + a == 16 + 65
charCode 属性:表示输入字符码。因此输入“a”字母和“A“字母时,分别显示 97(a 字符码)和 65(A 字符码);w3c兼容浏览器在 keypress(shift等非实际值键忽略) 时 event 存在 charCode 属性为对应字符值,keyCode 统一为0。IE 只有 keyCode, 则在 keypress(shift等非实际值键忽略) 时仍然采用 keyCode ,不过此时为对应字符值,没有charCode 属性。例如:
shift + a : {
ie: keyCode :97 ,charCode:undefined
firefox : keyCode:0 ,charCode:97
}
注意:
在标准的DOM 中:既有keyCode属性,还有charCode 属性。
但在标准的DOM 中,keypress 事件中keyCode 属性值始终为0 值;
在IE 浏览器中:事件对象只有keyCode属性,没有charCode 属性。
但在IE 浏览器中,keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值;
IE下,keyCode:对于keypress事件,表示按下按键的Unicode字符;对于keydown/keyup 事件,表示按下按键的数字代码。无charCode属性。
DOM标准下keyCode:表示按下按键的数字代码。charCode:按下按键的Unicode字符。
当我按下“a键(注意是小写的字母)时,
keydown代表的是按键
keypress代表的是按键所代表的ASC码的字符值
在火狐中会得到
keydown:keyCode is 65 charCode is 0
keypress:keyCode is 0 charCode is 97
keyup: keyCode is 65 charCode is 0
在谷歌中会得到
keydown:keyCode is 65 charCode is 0
keypress:keyCode is 97 charCode is 97
keyup: keyCode is 65 charCode is 0
在IE中会得到
keydown:keyCode is 65 charCode is undefined
keypress:keyCode is 97 charCode is undefined
keyup: keyCode is 65 charCode is undefined
而当我按下shift键时,
在火狐中会得到
keydown:keyCode is 16 charCode is 0
keyup: keyCode is 16 charCode is 0
不会得到任何的charCode值,因为按shift并没输入任何的字符,而且也不会触发keypress事件
在谷歌中会得到
keydown:keyCode is 16 charCode is 0
keyup: keyCode is 16 charCode is 0
在IE中会得到
keydown:keyCode is 16 charCode is undefined
keyup: keyCode is 16 charCode is undefined
在keydown事件里面,事件包含了keyCode – 用户按下的按键的物理编码。在keypress里,keyCode包含了字符编码,即表示字符的ASCII码。这样的形式适用于所有的浏览器– 除了火狐,它在keypress事件中的keyCode返回值为0。
如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keyCode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输入的字符,那么就使用keypress来获取,然后获取charCode(火狐和safari)或是keyCode(其他浏览器)。
实例:
<html> <head> <title>键盘事件</title> <script language="javascript"> function handle(oEvent){ if(window.event){ //处理兼容性,获得事件对象 oEvent = window.event; //设置IE的charCode值 oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; } var oDiv = document.getElementById("display"); //输出测试 oDiv.innerHTML += oEvent.type // 事件名称 + ": charCode:" + oEvent.charCode // 字符码 charCode + " keyCode:" + oEvent.keyCode + "<br>"; // 键盘码 keyCode } window.onload = function(){ var oTextArea = document.getElementsByTagName("textarea")[0]; oTextArea.onkeypress = handle; oTextArea.onkeydown = handle; } </script> </head> <body> <textarea rows="4"cols="50"></textarea> <div id="display"></div> </body> </html>
获得按键的charCode的兼容性写法
getCharCode: function(event){ if (typeof event.charCode == 'number')//首先检测按键有没有代表的字符,如果没有就没有charCode,为undefined { return event.charCode; }else { return event.keyCode } }
在获取了字符编码后就可以使用:
String.fromCharCode('获得的字符编码')
将其转换为实际字符