常用的键盘事件
事件除了使用鼠标触发,还可以使用键盘触发
我们主要学习以下三个键盘事件:
这里举一下onkeyup的示例,当我们按键弹起的时候事件触发:
document.addEventListener('keyup', function() {
console.log('弹起');
})
只要我按键弹起一次,控制台就会输出一次。
键盘事件对象
注意: onkeydown和onkeyup 不区分字母大小写,onkeypress区分字母大小写。在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键(包括功能键)keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCIl值
小示例:当我们按下Esc键时,弹出游戏开始对话框(我们可以通过keyCode先求出Esc ASC||码值)
document.addEventListener('keydown',function(e){
if(e.keyCode==27)
{
alert("游戏开始");
}
else{
alert("按Esc键开始游戏");
}
})
实现效果:
当我们没有按下Esc时:
当我们按下Esc时:
示例练习:模拟京东按键输入内容
这是京东的搜索框,当我们没有鼠标没有点击搜索框时,搜索框不会获得焦点,但是当我们按下s键,搜索框便可以自动获得焦点,大家可以去京东试试这个小功能,那我们如何实现它呢?
核心思路:检测用户是否按下了s键,如果按下s 键,就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点:使用js里面的 focus()方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
}
})