12. 键盘事件

键盘事件

12.1 事件触发

• onkeydown事件触发表明键盘按键被按下,如果一直按着某个按键不松手，则事件会一直触发 **注意:**当onkeydown事件连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快，这种设计是为了防止误操作事故的发生,如果不想要这种效果请使用定时器

• onkeyup事件触发表明键盘按键被松开

**注:**键盘事件有一般都会绑定给一些可以获取到焦点的对象或者是document，有焦点的对象就是可以让光标停留的地方，比如input标签

var input=document.getElementById("input");
input.onkeydowm=function(){

}

12.2 事件属性

通过事件对象event的keyCode和key属性可以获取按键的编码和输入键的字符，可以判断哪个按键被按下

if(event.keyCode===89){
 console.log("y被按下了");
}

if(event.key==="y"){
    console.log("y被按下了");
}

事件对象中还提供了几个辅助属性

• altKey属性判断alt键是否被按下，如果按下则返回true，否则返回false

• ctrlKey属性判断ctrl键是否被按下，如果按下则返回true，否则返回false

• shiftKey属性判断shift键是否被按下，如果按下则返回true，否则返回false

//判断y和ctrl是否同时被按下
document.onkeydown=function(event){
    event=event||window.event;
    if(event.keyCode===89&&event.ctrlKey){
            console.log("ctrl和y都被按下了")
        }
}

注意:在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消了默认行为return false，则输入的内容不会出现在文本框中

//文本框中不能输入数字
input,onkeydown=function(event){

    event=event||window.event;
    if(event.keyCode>=48&&event.keyCode<=57){
            return false;
        }
}