keydown:按下键盘上的任意键时触发 , 且按住不放的话 , 会重复触发;keypress:按下键盘上的字符键时触发 , 且按住不放的话 , 会重复触发;按下Esc也会触发这个事件;keyup:释放键盘上的键时触发;keydown和keyup是低级键盘事件 , 无论按下或释放任何键 , 都会触发;keypress是高级键盘事件 , 只有按下可打印的字符的键 , 才会触发它;
虽然所有元素都支持以上3个事件 , 但只有在通过文本框输入文本时才最常用;
在用户按了一下键盘上的字符键时 , 其触发事件顺序是:keydown – keypress – keyup;其中keydown、keypress在文本框发生变化之前被触发;而keyup则是在文本框已经发生变化之后触发;
如果用户按下一个字符键不放 , 就会重复触发keydown和keypress事件 , 直接用户松开该键为止;
如果按下的是一个非字符键 , 其触发事件顺序是:keydown – keyup;如果按住这个非字符键不放 , 会一直重复触发keydown事件 , 直到用户松开为止 , 此时会触发keyup事件;
键盘事件也支持辅助键 , 其事件对象中也有shiftKey、ctrlKey、altKey和metaKey属性 , IE不支持metaKey;
ptextarea id=txtInput/textareatextarea id=txt/textarea/pscriptvar txtInput = document.getElementById(txtInput);txtInput.addEventListener(keydown, handlerEvent, false);txtInput.addEventListener(keypress, handlerEvent, false);txtInput.addEventListener(keyup, handlerEvent, false);function handlerEvent(event){var txt = document.getElementById(txt);event = event || window.event;txt.value += n + event.type;}/scriptevent对象属性:
键码keyCode属性:键盘上的键都会对应一个Unicode值 , 这个值就是keyCode键码;该属性已被DOM3废弃 , 但所有浏览器都支持它;
对于keydown及keyup事件来说 , 所有键被按下都可以被触发 , 所以它们关注的是键 , 其event对象的keyCode返回的就是键码 , 与键盘上一个特定的物理键对应;对于字符键来说 , 与它的大小写无关 , 如:字母A和a的值都是65;
txt.addEventListener(keydown, function(event){// 字母a和A均为65 , 回车为13 , ctrl为17等console.log(event.keyCode);});键 键码
退格(Backspace)8制表(Tab)9回车(Enter)13上档(Shift)16控制(Ctrl)17Alt18暂停/中断(Pause/Break) 19大写锁定(Caps Lock) 20退出(Esc)27空格(Space)32上翻页(Page Up)33下翻页(Page Down)34结尾(End)35开头(Home)36左箭头(Left Arrow)37上箭头(Up Arrow)38右箭头(Right Arrow) 39下箭头(Down Arrow) 40插入(Ins)45删除(Del)46字母键(A-Z)65-90左Windows键91右Windows键92上下文菜单键93数字小键盘0-996-105数字小键盘+107数字小键盘-及大键盘的- 109数字小键盘.110数字小键盘/111F1-F12112-123数字锁(Num Lock)144滚动锁(Scroll Lock)145分号FF为59 , 其他为186等于(=)187小于(或逗号)188减号(-)189大于(或句号)190正斜杠191沉音符(`)192等于61左方括号219反斜杠220右方括号221单引号222Fn255注:在Firefox和低版本的Opear中 , 分号键的值为59 , 即ASCII中分号的编码;但其他浏览器返回186 , 即键码;
对于keypress事件 , 只能是可打印字符键被按下才会触发 , 此时 , keyCode返回的是该字符对应的Unicode字符代码 , 其与键码是不一样的;
txt.addEventListener(keydown, function(event){console.log(键码: + event.keyCode); // A和a为65});txt.addEventListener(keypress, function(event){console.log(字符代码: + event.keyCode); // A为65 , a为97});键 代码
0-948-57A-Z65-90a-z97-122空格32波浪符126感叹号33@64#35$36%37&38(40)41+43*42^94_95左方括号 91反斜杠92右方括号 93左花括号 123竖线124右花括号 125单引号39双引号34冒号58分号59逗号44句号46斜框47小于号60大于号62问号63回车13示例:
// 数字编辑限制// 8: 退格键// 46:Delete// 37-46:方向键// 48-57:小键盘区的数字// 96-105:主键盘区的数字// 110、190:小键盘区和主键盘区的小数点// 189、109:小键盘区和主键盘区的负号 。// 13: 回车// 9:Tabvar txt = document.getElementById(txt);txt.addEventListener(keydown, numOnkeyDown, false);function numOnkeyDown(event){if(!isValidNum(event.keyCode)){event.preventDefault();return false;}}function isValidNum(keyCode){return (keyCode == 8 ||keyCode == 9 ||keyCode == 46 ||keyCode == 109 ||keyCode == 110 ||keyCode == 189 ||keyCode == 190 ||(keyCode = 37 && keyCode = 46) ||(keyCode = 48 && keyCode = 57) ||(keyCode = 96 && keyCode = 105));}示例:屏蔽按键组合键 , 如:
- 探云空调是什么牌子
- 美的空调c5是什么意思
- 显卡独显是什么样的 显卡独显是什么意思
- 空调内机风扇不转是什么原因
- 电视在播放中突然黑屏是什么原因
- menu键是什么意思 MENU是什么功能键
- ffu是什么意思 /FF是什么意思
- 962464用九键打出来是什么意思
- 莱万是什么级别 莱万是哪国的
- 京东闪付用的是什么钱