0%

WebShell中热键规划

最近在做WebShell下热键,整体方案这里总结下

方案

  1. 终端会话热键

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

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

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

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

浏览器层面部分热键冲突

热键具体除了考虑表意化方便用户理解记忆,还需考虑网页运行所在浏览器下的支持度,毕竟有些热键被占用且优先级最高,无法改写。

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

可拦截热键

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

不可拦截热键

  • ⌘ N-创建新window
  • ⌘ T-创建新Tab
  • ⌘ W-关闭Tab

调研后决定,尽可能还是尊重用户在App下的一些热键习惯,部分不支持的,增加修饰键进行支持。

比如如果终端支持多tab,可以是⌥ T

一些功能热键的设计

这里列出一些,供参考

功能 Mac Windows
热键介绍 ⌘ / Ctrl /
设置 ⌘ , Ctrl ,
Tab切换 ⌃ 1-5 Ctrl 1-5
Tab新建 ⌥ T Alt T
搜索 ⌘ F Ctrl F
放大字体 ⌘ + Ctrl +
缩小字体 ⌘ - Ctrl -

延伸

苹果平台判断

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

1
2
3

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

mod键

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