WebShell中热键规划

发表于 更新于 阅读次数： 本文字数： 987 阅读时长 ≈ 1 分钟

最近在做的WebShell需要支持热键，整体方案这里总结下

热键理念

  1. 热键组合需要考虑表意化方便用户理解记忆，不要反常识，同时用户很好操作

  2. 热键要规避常用的热键，比如浏览器的一些热键，即使可以拦截覆盖也要谨慎考虑

热键冲突

Web网页受限于系统/浏览器/浏览器插件热键冲突，同时这里做的是网页终端，终端本身也有一些热键/按键，因此我要考虑到这几方面的热键

终端本身一些热键

  • ⌥ ⬅️ 光标向左移动到上一个词的开始，Windows下没对应支持

  • ⌥ ➡️ 光标向左移动到下一个词的开始，Windows下没对应支持

  • ⌘ ⬅️ 光标移动到行首，Windows下是Home

  • ⌘ ➡️ 光标移动到行尾，Windows下是End

  • Control C 取消

浏览器层面部分热键

浏览器本来就有一些热键，同时部分热键可拦截部分又不可以

在Mac- Chrome下实际测试尝试后有以下结果

可拦截热键

  • ⌘ F
  • ⌘ L
  • ⌘ P
  • ⌘ ,
  • ⌘ S
  • ESC

不可拦截热键

  • ⌘ N 创建新window
  • ⌘ T 创建新Tab
  • ⌘ W 关闭Tab
  • ⌘ ⇧ [ 左Tab
  • ⌘ ⇧ [ 右Tab

系统热键

  • ⌘ Tab App切换

最终方案

  1. 终端会话热键

    • 这里需要利用xterm.attachCustomKeyEventHandler回调函数解决
    • 使用注意，回调函数返回true即阻止默认行为，停止冒泡

  2. 页面热键

    • 终端之外，比如全局也需要有热键支持

    • 推荐mousetrap包，该包对于跨平台环境增加了mod参数方便设定支持。mod键在苹果平台下即⌘，非苹果即Ctrl，这样可以一套热键配置，方便维护

    • 使用注意，回调函数返回false即阻止默认行为，停止冒泡

热键规划

这里列出一些，供参考

功能 Mac Windows
热键介绍 ⌘ / Ctrl /
设置 ⌘ , Ctrl ,
Tab切换 ⌃ 1-5 Ctrl 1-5
Tab新建 ⌥ T Alt T
Tab关闭 ⌥ W Alt W
搜索 ⌘ F Ctrl F
放大字体 ⌘ ⇧ + Ctrl +
缩小字体 ⌘ ⇧ - Ctrl -
AI命令 ⌃ ` Ctrl `
命令面板 ⌘⇧P

延伸

苹果平台判断

不同平台下热键绑定不同，因此需要进行平台判断。

1
2
3

/Mac|iPod|iPhone|iPad/.test(navigator.platform)

mod键

在热键规划上，Mac下的⌘键对应win下的⌃键，而不是windows键，这点需要注意

Windows下ctrl left/right

hyper下已经关闭该支持，但我个人测试是可以的