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

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

实例:https://tool.szfx.top/

参考资料:

1、JS如何监听键盘组合按键

2、键盘按键键码值(keyCode)对照表

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:JS监听键盘按键执行操作 作者:松鼠小

评论

  1. 匿名
    Windows Chrome 111.0.0.0
    北京市 电信
    1 年前
    2023-3-29 10:47:38

    大佬,问下底栏鱼的动画是如何加的

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: Github @zhheo/Sticker-Heo
Source: github.com/k4yt3x/flowerhd
颜文字
AmashiroNatsukiEars
Heo
小恐龙
花!
上一篇
下一篇