JS监听键盘按键执行操作

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

知识储备：

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

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，输入框id为s

$(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记录，是为了避免一直监听按键导致输入失效。

作者：松子分享-JS监听键盘按键执行操作