JavaScript 绑定组合键

在写在线编辑时需要使用 ctrl+s 组合键完成保存的功能，今天总结下用法。



监听 ctrl+s 组合键，并自定义功能，其他键位正常使用

1
2
3
4
5
6
7
8
9
10
document.onkeydown = function(e) {
  console.log(e);
  var keyCode = e.keyCode || e.which || e.charCode;
  var ctrlKey = e.ctrlKey || e.metaKey;
  if(ctrlKey && keyCode == 83) {
    e.preventDefault();
    alert('保存')
  }
  return true;
}

按下 ctrl+l 打印 event 会有如下结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
altKey : false
bubbles : true
cancelBubble : false
cancelable : true
charCode : 0
code : "KeyL"
composed : true
ctrlKey : false
currentTarget : null
defaultPrevented : false
detail : 0
eventPhase : 0
isComposing : false
isTrusted : true
key : "l"
keyCode : 76
location : 0
metaKey : true
repeat : false
returnValue : true
shiftKey : false
srcElement : body
target : body
timeStamp : 87489.19999999634
type : "keydown"
which : 76

根据 altKey, shiftKey, keyCode 我们还可以完成 alt, shift 等组合键的判断。

如果考虑兼容问题，可以直接使用一个开放组件 jQuery.Hotkeys

1
$(document).on('keydown', null, 'ctrl+a', fn);
最近更新
Alfred Workflow 命令行帮助工具
最近热读
Go 判断数组中是否包含某个 item
Vim 高级功能 vimgrep 全局搜索文件
办理北京工作居住证的一些细节
Go 语法错误：Non-declaration statement outside function body
Mac 电脑查看字体文件位置
扫码关注公众号，或搜索公众号“温欣爸比” 及时获取我的最新文章
赏

谢谢你请我喝咖啡

支付宝
微信