# JS监听键盘按键执行操作

*Published:* 2023-10-27
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年10月27日，已超过 180天没有更新



需求：监听Ctrl + F 键，执行搜索框显示，并光标定位到搜索框。

1、键盘按键键码值（keyCode），字母和数字键的键码值 (keyCode)

[![](https://www.xarjtc.com/wp-content/uploads/2023/10/SP_20230225_011249.jpg)](https://www.xarjtc.com/wp-content/uploads/2023/10/SP_20230225_011249.jpg)

2、监听ctrl（cmd）+ s事件：

```
document.onkeydown = function(e) {
        var keyCode = e.keyCode || e.which || e.charCode;
        var ctrlKey = e.ctrlKey || e.metaKey;
        if(ctrlKey && keyCode == 83) {
            alert('按住了 CTRL+S');
        }
        e.preventDefault();
        return false;
}
```

综合实现代码如下：

搜索框id为search，先前通过css设置display属性为none

```
$(function(){
    if(window.localStorage.getItem("search") == 'yes'){
        document.getElementById("search").style.display="block";
    }else{
        document.onkeydown = function(e) {
        var keyCode = e.keyCode || e.which || e.charCode;
        var ctrlKey = e.ctrlKey || e.metaKey;
        if(ctrlKey && keyCode == 70) {
            window.localStorage.setItem("search", "yes");
            document.getElementById("search").style.display="block";
            document.getElementById('s').select();
            e.preventDefault();
            jQuery('html, body').animate({ scrollTop: 0 }, 500);
            return false;
            }
        }
    }
    
});
```

前提：引入jQuery，使用cookie记录，是为了避免一直监听按键导致输入失效。