0%

WebShell中热键规划

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

方案

  1. 终端会话热键

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

    • 推荐mousetrap包,该包对于跨平台环境增加了mod参数方便设定支持。mod键在苹果平台下即⌘,非苹果即Ctrl,这样可以一套热键配置,方便维护
    • 使用注意,回调函数返回false即阻止默认行为,停止冒泡

浏览器层面部分热键冲突

热键具体除了考虑表意化,还需要考虑网页所依托的浏览器下部分热键冲突。需要了解,浏览器部分热键无法通过JS脚本中阻止冒泡/缺省行为,但部分热键可以。

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

可拦截热键

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

不可拦截热键

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

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

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

延伸

苹果平台判断

1
2
3

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

mod键

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