温馨提醒

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

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

需求：监听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

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

历史上的今天
10月
27
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系客服QQ3387285338进行处理。