美文网首页
浏览器键盘组合快捷键监听及坑点

浏览器键盘组合快捷键监听及坑点

作者: rub1cky | 来源:发表于2021-07-20 23:09 被阅读0次

前提

项目中开发编辑器,需求是对编辑器设定一些快捷键

需求

alt+~
alt+1
alt+2
alt+3 ...

实现

我们常规使用keyCode进行判断

document.addEventListener('keydown', function(e){
    // 主键盘
    if(e.altKey && e.keyCode == 192) { // 对应alt+~
        ...
    }
    if(e.altKey && e.keyCode == 49) { // 对应alt+1
        ...
    }
    
    if(e.altKey && e.keyCode == 50) { // 对应alt+2
        ...
    }
    ...
    
    // 小键盘
    if(e.altKey && e.keyCode == 97) { // 对应alt+1
        ...
    }
    
    if(e.altKey && e.keyCode == 98) { // 对应alt+2
        ...
    }
    ...
})

坑点

  1. keyCode 229 问题
1.  Read the virtual key code from the operating system's event information, if such information is available.
2.  If an Input Method Editor is processing key input and the event is keydown, return 229.
3.  If input key when pressed without modifiers would insert a numerical character (0-9), return the ASCII code of that numerical character.
4.  If input key when pressed without modifiers would insert a a lower case character in the a-z alphabetical range, return the ASCII code of the upper case equivalent.
5.  If the implementation supports a key code conversion table for the operating system and platform, look up the value. If the conversion table specifies an alternate virtual key value for the given input, return the specified value.
6.  If the key's function, as determined in an implementation-specific way, corresponds to one of the keys in the [table of fixed virtual key codes](https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html#fixed-virtual-key-codes), return the corresponding key code.
7.  Return the virtual key code from the operating system.
8.  If no key code was found, return 0.

参考

https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html

相关文章

  • 浏览器键盘组合快捷键监听及坑点

    前提 项目中开发编辑器,需求是对编辑器设定一些快捷键 需求 实现 我们常规使用keyCode进行判断 坑点 key...

  • WIN系统-快捷键

    常用电脑键盘操作快捷键 Ctrl组合键 Shift组合键 Alt组合键 Win组合快捷键 F组合快捷键 更多组合键...

  • Swift--监听iPhone键盘弹出及隐藏事件

    开发需求:对键盘弹出及隐藏事件进行监听 需要通过NotificationCenter对键盘事件进行监听 如果要监听...

  • vue项目中监听键盘操作 (组合键)

    监听键盘事件实现组合键的判断 ==================遇到的问题。 只能获取到键盘(such as:F...

  • JS给DOM 添加多个键盘事件

    根据不同键盘编码判断,即可实现组合快捷键: HTML: JS:

  • Mac OS X系统操作介绍

    目录 软件安装/卸载 废纸篓 终端 浏览器 Mac键盘及常用快捷键 1.软件安装 Mac平台的软件比Windows...

  • mac快捷键

    Mac 键盘快捷键 您可以按组合键来实现通常需要鼠标、触控板或其他输入设备才能完成的操作。 要使用键盘快捷键,请按...

  • Mac 快捷键大全

    Mac 键盘快捷键 您可以按组合键来实现通常需要鼠标、触控板或其他输入设备才能完成的操作。 要使用键盘快捷键,请按...

  • Mac 快捷键使用大全

    Mac 键盘快捷键 您可以按下某些组合键来实现通常需要鼠标、触控板或其他输入设备才能完成的操作。 要使用键盘快捷键...

  • Mac 键盘快捷键

    Mac 键盘快捷键您可以按组合键来实现通常需要鼠标、触控板或其他输入设备才能完成的操作。 要使用键盘快捷键,请按住...

网友评论

      本文标题:浏览器键盘组合快捷键监听及坑点

      本文链接:https://www.haomeiwen.com/subject/lvkdmltx.html