[JavaScript] 常用的键盘事件

文章目录

常用的键盘事件键盘事件对象示例练习：模拟京东按键输入内容

常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发 我们主要学习以下三个键盘事件： 这里举一下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();

}

})