您当前的位置:首页 > 网站建设笔记 >

键盘与文本事件

0

用户在使用键盘时会触发键盘事件。DOM2级事件最初规定了键盘事件,但在最终定稿之前又删除了相应的内容。结果,对键盘事件的支持主要遵循的是DOM0级。DOM3级事件为键盘事件制定了规范,IE9率先完全实现了该规范。其他浏览器也在着手实现这一标准,但仍然有很多遗留的问题。有3个键盘事件,简述如下。

  • keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
  • keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
    按下Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。
  • keyup:当用户释放键盘上的键时触发。

虽然所有元素都支持以上3个事件,但只有在用户通过文本框输入文本时才最常用到。只有一个文本事件:textInput。这个事件是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。在用户按了一下键盘上的字符键时,首先会触发keydown事件,然后紧跟着是keypress事件,最后会触发keyup事件。其中,keydown和keypress都是在文本框发生变化之前被触发的,而keyup事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放,就会重复触发keydown和keypress事件,直到用户松开该键为止。如果用户按下的是一个非字符键,那么首先会触发keydown事件,然后就是keyup事件。如果按住这个非字符键不放,那么就会一直重复触发keydown事件,直到用户松开这个键,此时会触发keyup事件。键盘事件与鼠标事件一样,都支持相同的修改键。而且,键盘事件的事件对象中也有shiftKey、ctrlKey、altKey和metaKey属性。IE不支持metaKey。

键码

在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。因此,数字键7的keyCode值为55,而字母A键的keyCode值为65——与Shift键的状态无关。DOM和IE的event对象都支持keyCode属性。请看下面这个例子:

<script type="text/javascript">
(function(){
	var keyInput=document.querySelector("input[name='key']");
	var keyCode=document.querySelector("input[name='keyCode']");
	keyInput.style.cssText=keyCode.style.cssText="background-color:white;border-color:#000;border-style:solid;border-width:1px;box-sizing:border-box;display:block;border-radius:5px;padding:8px;width:100%;box-shadow:1px 1px 2px #ccc inset;";
	if(keyInput.addEventListener){
		keyInput.addEventListener("keyup",function(event){
			keyCode.value=keyCode.value+" "+event.keyCode;
		},false);
	}
})();
</script>

在这个例子中,用户每次在文本框中按键触发keyup事件时,都会显示keyCode的值。下表列出了所有非字符键的键码。

键码键码
退格(Backspace)8数字小键盘197
制表(Tab)9数字小键盘298
回车(Enter)13数字小键盘399
上档(Shift)16数字小键盘4100
控制(Ctrl)17数字小键盘5101
Alt18数字小键盘6102
暂停/中断(Pause/Break)19数字小键盘7103
大写锁定(Caps Lock)20数字小键盘8104
退出(Esc)27数字小键盘9105
上翻页(Page Up)33数字小键盘+107
下翻页(Page Down)34数字小键盘及大键盘上的-109
结尾(End)35数字小键盘.110
开头(Home)36数字小键盘/111
左箭头(Left Arrow)37F1112
上箭头(Up Arrow)38F2113
右箭头(Right Arrow)39F3114
下箭头(Down Arrow)40F4115
插入(Ins)45F5116
删除(Del)46F6117
左Windows键91F7118
右Windows键92F8119
上下文菜单键93F9120
数字小键盘096F10121
数字锁(Num Lock)144F11122
滚动锁(Scroll Lock)145F12123
分号(IE/Safari/Chrome中)186正斜杠191
分号(Opera/Firefox中)59沉音符(`)192
小于188等于61
大于190左方括号219
反斜杠(\)220
右方括号221
单引号222

无论keydown或keyup事件都会存在的一些特殊情况。在Firefox和Opera中,按分号键时keyCode值为59,也就是ASCII中分号的编码,但IE和Safari返回186,即键盘中按键的键码。

顶部中部底部